精华内容
下载资源
问答
  • vue面试题

    2021-01-26 23:28:52
  • Vue面试题

    2020-09-22 21:01:13
    Vue面试题 1、Vue 组件 data 为什么必须是函数 因为 JS 本身的特性带来的,如果 data 是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有 Vue 实例的数据。如果将 data 作为一个...

    Vue面试题

    1、Vue 组件 data 为什么必须是函数

    因为 JS 本身的特性带来的,如果 data 是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有 Vue 实例的数据。如果将 data 作为一个函数返回一个对象,那么每一个实例的 data 属性都是独立的,不会相互影响了。

    2、Vue 中 key 的作用

    key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。就地复用
    有相同父元素的子元素必须有独特的 key。

    3、单页面应用的优缺点

    • 单页面应用(SPA)

    单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。

    • 多页面应用(MPA)

    多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新

    单页面的优点:
    • 用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
    • 前后端分离
    • 页面效果会比较炫酷(比如切换页面内容时的专场动画)


    单页面缺点:
    • 不利于seo 搜索引擎优化
    • seo分为站内seo和站外seo。 站内seo 就是指网址内部优化,
    • 站外seo。就是网址的外部优化 提高访问量
    • 导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
    • 初次加载时耗时多
    • 页面复杂度提高很多

    4、作用域和作用域链?*

    作用域:在JS中我们把作用域分为全局作用域和局部作用域(每一个函数的作用域)
    作用域链:在一个局部作用域查找变量,会先从当前作用域开始查找,然后逐层向上查找,
    如果能找到返回对应的值,找不到的话会抛出一个未定义的错误,我们称这个查找的方式为作用域链
    作用域是可以相互嵌套,但是不允许外部作用域访问内部作用域的变量
    变量的一个生命周期:全局变量永久保存,局部变量是当前函数执行完成之后自动销毁,也就是他的垃圾回收机制

    5、Vuex是什么?

    对数据统一进行管理

    • state中保存着共有数据,数据是响应式的
    • getter可以对state进行计算操作,主要用来过滤一些数据,可以在多组件之间复用
    • mutations同步的,修改state中的值
    • actions页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。
    • modules:模块化vuex
    展开全文
  • vue 面试题

    2020-08-13 18:17:53
    vue面试题 computed 和 watch computed 有缓存,原data数据不变,不会重新计算 watch 监听引用类型 拿不到oldvalue (监听string 和 对象的不同) 动态绑定class的方法 计算属性和 watch 的区别 怎样理解单向数据流 ...

    Vue面试题

    v-show 与 v-if 区别
    为何v-for 中要用key
    computed 和 watch
    动态绑定class的方法
    组件间通信/ue组件如何通信  自定义事件
    props  $emit   $ref 
    描述vue生命周期 (在父子组件的情况下)
    何时使用beforeDestroy 
    描述组件渲染和更新过程
    自定义v-model /自定义组件的语法糖 v-model 是怎样实现的
    $nextTick
    slot
    动态、异步组件/何时使用异步组件
    keep-alive/ 何时使用keep-alive
    mixin / 多个组件有相同逻辑 抽离出来如何抽离
    Vuex 中action 和 mutation 有什么区别
    如何设置动态路由
    如何实现路由懒加载/异步加载
    双向数据绑定v-model的实现原理
    vue-router 有哪几种导航钩子
    Vue.js 2.x 双向绑定原理
    什么是 MVVM,与 MVC 有什么区别
    vue的原理
    理解Vue中的Render渲染函数
    怎样理解单向数据流
    路由跳转
    请用一个vNode 描述一个Dom结构
    监听Data变化的核心api 是什么
    Vue如何监听数组变化
    请描述响应式原理
    为何组件data必须是一个函数
    diff算法的事件复杂度
    简述diff算法过程
    Vue 为何是异步渲染,$nextTick有何用
    VUe 常见性能优化
    ajax应该放在哪个生命周期
    如何将组件所有props 传递给子组件
    

    vue基础考点

    v-show 与 v-if 区别

    只不过v-show是改变元素的css属性display。当v-show表达式的值为false是,元素会隐藏,查看DOM结构看到元素上加载了内联样式display:none; (v-show 显示和隐藏)

    v-if是真正的条件渲染,它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false,则一开始元素/组件并不会渲染,只有当条件第一次变为真时才开始编译。(v-if 可用于刷新组件)(v-if 渲染和销毁)

    而v-show只是简单的css属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为它切换开销相对较大,而v-show适用于频繁切换条件。

    为何v-for 中要用key

    必须使用key 且不能是index和random (尽量不要使用index作为key的值)
    diff算法中通过tag和key来判断 是否是sanmeNode
    减少渲染次数 提升渲染性能

    在 v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引

    <li v-for="(item,index) in students" :key="item.id" >
    	{{index}}:{{item.name}} - {{item.age}}
    </li>
    

    computed 和 watch

    通俗来讲,既能用computed 实现又可以用 watch 监听来实现的功能,推荐用 computed,重点在于 computed 的缓存功能

    computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变;
    有缓存,原data数据不变,不会重新计算 (computed的值可以不在data中定义)(提升性能)

    watch 监听的是已经在 data 中定义的变量,当该变量变化时,会触发 watch 中的方法;(监听引用类型 拿不到oldvalue )

     data:{
         a:1,
         b:{
             c:1
         }
     },
     watch:{
         a(val, oldVal){//普通的watch监听
             console.log("a: "+val, oldVal);
         },
         b:{//深度监听,可监听到对象、数组的变化
             handler(val, oldVal){
                 console.log("b.c: "+val.c, oldVal.c);//watch 监听引用类型 拿不到oldvalue 
             },
             deep:true //true 深度监听
         }
     }
    

    动态绑定class的方法

    参考:vue动态绑定class的常用几种方式

    • .绑定单个class
    • 绑定的数据对象
    • 绑定一个返回对象的计算属性
    • 单纯数组方法
    • 数组与三元运算符结合判断选择需要的class

    组件间通信/组件如何通信 自定义事件

    参考:vue采用EventBus实现跨组件通信及注意事项
    考点 :props $emit $ref eventBus
    vue本身具有自定义事件能力()
    取消事件订阅必须跟事件订阅成对出现,否则会重复订阅,对javascript性能造成不必要的浪费

    自定义事件
    event.noeventno eventoff event$emit

    props $emit $ref

    参考:vue 组件通信的几种方式解读

    子组件的props选项能够接收来自父组件数据。没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向
    $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。

    如果ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过refrefDOM使DOMref可能获取到在子组件里定义的属性和方法。 如果ref在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,***通过ref可能获取到该DOM 的属性集合,访问到DOM元素***,

    prop和$ref之间的区别:
    prop 着重于数据的传递,它并不能调用子组件里的属性和方法。像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop。
    $ref 着重于索引,主要用来调用子组件里的属性和方法,其实并不擅长数据传递。而且ref用在dom元素的时候,能使到选择器的作用,这个功能比作为索引更常有用到。

    总结:
    props 用于 父 -> 子 传值
    $emit 用于 子 -> 父传值
    $ref 用于 父 -> 子 传值

    描述vue生命周期 (在父子组件的情况下)

    create vue的实例 存在于js内存模型中,是内存中的一个变量 并没有开始渲染 vue组件初始化完成
    mounted 网页绘制、渲染完成

    创建 初始组件是由外到内 (父->子)
    渲染组件是由内到外的 (子->父)
    销毁组件是由内到外的 (子->父)

    子组件的数据更新,不会引起父组件的beforeUpdate和updated生命周期钩子
    11
    在这里插入图片描述

    何时使用beforeDestroy

    解绑自定义事件
    清楚定时器
    解绑自定义的DOM事件 如 window scroll (销毁子组件以及事件监听器 )

    解绑 evenbus 绑定事件或者自定义事件 (防止可能造成内存泄漏)(mounted 中添加eventbus 绑定的事件)

    描述组件渲染和更新过程

    vue 高级特性

    自定义v-model /自定义组件的语法糖 v-model 是怎样实现的

    input 元素的value = this.name
    绑定 input 事件 this.name = $event.target.value
    data 会触发 re-render

    $nextTick

    异步渲染 $nextTick 待dom完成后再回调
    页面渲染 会将data的修改数据整合 ,多次data修改只会渲染一次

    slot

    作用域插槽:
    使用时候子组件标签中要有标签,再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;

    具名插槽:

    动态、异步组件/何时使用异步组件

    何时使用异步组件:
    加载大组件
    路由异步加载

    动态组件:

    // currentTabComponent 组件名称
    <!--动态组件-->
    <component  :is="slotDemo"></component>
    
    
    <script>
      import slotDemo  from './slotDemo'
      import scopedSlotDemo  from './scopedSlotDemo'
      import nameSlot  from './nameSlot'
    
      export default {
        components:{
          slotDemo,scopedSlotDemo,nameSlot
        },
      }
    </script>
    

    异步组件:
    import 大函数
    按需加载,异步加载大组件

    
    <slotDemo  v-if="showSlotDemo">
    
    
    <script>
      export default {
        components:{
          slotDemo: () => import('./slotDemo') 
        },
      }
    </script>
    

    keep-alive/ 何时使用keep-alive

    何时使用keep-alive:
    缓存组件,不需要重复渲染
    多个静态tab页切换
    性能优化

    缓存组件
    频繁切换,不需要重新渲染
    vue常见性能优化

    // 如果没有<keep-alive>  下面三个组件切换时会销毁其他组件
    // 如果使用<keep-alive>    下面三个组件切换时不会销毁其他组件,只会切换显示隐藏
    <keep-alive>
    	<slotDemo  v-if="stat ===1 "/>	
    	<scopedSlotDemo  v-if="stat ===2 "  />	
    	<nameSlot  v-if="stat ===3 " />	
    </keep-alive>
    
    <script>
      import slotDemo  from './slotDemo'
      import scopedSlotDemo  from './scopedSlotDemo'
      import nameSlot  from './nameSlot'
    
      export default {
        components:{
          slotDemo,scopedSlotDemo,nameSlot
        },
      }
    </script>
    

    mixin / 多个组件有相同逻辑 抽离出来如何抽离

    多个组件有相同逻辑 抽离出来
    mixin 不是完美的解决方案 会有一些问题
    vue3 提出的Composition API旨在解决这些问题

    缺点:
    变量来源不明确,不利于阅读
    多mixin可能造成mixin命名冲突
    mixin和组件可能出现 多对对关系,复杂度较高

    vuex

    在这里插入图片描述

    基本概念

    state
    getter
    action
    mutation

    用于vue的组件
    dispatch
    commit
    mapState
    mapGetter
    mapAction
    mapMutation

    Vuex 中action 和 mutation 有什么区别

    action 中处理异步 mutation 不可以
    mutation 做原子操作
    action 可以整合 多个mutation

    vue-router

    路由模式 hash模式 H5 history模式
    H5 history模式 需要server段提供支持(why)

    路由设置 动态路由 懒加载

    如何设置动态路由

    const = {
    		// 获取参数 10 20
    		template: '<div> {{ }}</div>'
    }
    const router= new VueRouter({
    	router:[
    		// 动态路径参数  以冒号开头, 能命中 'user/10' 'user/20'  等格式的路由
    		{path: '/user/:id',component : User}
    	]
    })
    

    如何实现路由懒加载/异步加载

    {
          path: '/rank-list',
          name: 'RankList',
          meta: {
            title: '排行榜'
          },
          component: RankList
    }
    const RankList = () => import( /* webpackChunkName: "RankList" */ '@/components/RankList')
    

    vue 原理

    双向数据绑定v-model的实现原理

    vue-router 有哪几种导航钩子

    Vue.js 2.x 双向绑定原理

    什么是 MVVM,与 MVC 有什么区别

    vue的原理

    理解Vue中的Render渲染函数

    怎样理解单向数据流

    路由跳转

    请用一个vNode 描述一个Dom结构

    监听Data变化的核心api 是什么

    Object.defineProperty
    深度监听 监听数组
    有何缺点

    Vue如何监听数组变化

    Object.defineProperty 不能监听数组变化
    重新定义原型 重写push pop等写法 实现监听
    Proxy 可以原生支持监听数组变化

    请描述响应式原理

    监听data变化
    组件渲染 和更新的流程

    为何组件data必须是一个函数

    diff算法的事件复杂度

    O(n)
    在O(n^3) 基础上做了一些调整

    简述diff算法过程

    patdh(elem,vnode) 和 patch(vnode,newVnode)
    patchVnode 和 addVnodes 和 removeVnodes
    updateChildren (key的重要性)

    Vue 为何是异步渲染,$nextTick有何用

    $nextTick 是在DOM更新后 触发回调

    VUe 常见性能优化

    合理使用 v-show 和 v-if
    合理使用 computer
    v-for 时 加key 避免和v-if同时使用
    自定义事件 DOM事件及时销毁
    合理使用异步组件
    合理使用keep-alive
    data 层级不要太深
    使用vue-loader 在开发环境做模板变异(预编译)
    webpack 层面的优化
    前端通用的性能优化
    使用SSR

    ajax应该放在哪个生命周期

    应该放在 mounted 中
    js 是单线程的 ajax异步获取数据

    如何将组件所有props 传递给子组件

    props<Uservbind="props <User v-bind="props " />

    如何应对面试

    框架的使用(高级特性、周边插件)
    框架的原理(基本原理、热门技术的深度、全面性)
    框架的实际应用 设计能力(组件结构、数据结构)

    面试官考察

    技术追求 (考察原理)
    独立承担项目 (考察设计能力)

    熟悉基本使用,了解使用场景级项目结合的使用经验

    参考

    98道经典Vue面试题总结(长期更新)

    展开全文
  • VUE面试题

    2021-03-18 20:02:07
    这期继续完善VUE面试题 - - -接上篇 VUE中双向数据绑定的原理 首先说明VUE中的双向数据是通过数据劫持结合发布者-订阅模式的方法,通过Object.defineProperty()属性中的getter和setter,在数据发生变化时发布消息...

    这期继续完善VUE面试题 - - -接上篇

    VUE中双向数据绑定的原理

    1. 首先说明VUE中的双向数据是通过数据劫持结合发布者-订阅模式的方法,通过Object.defineProperty()属性中的gettersetter,在数据发生变化时发布消息给订阅者,接着触发相对应的回调,来渲染页面(视图)。

    2. 具体实现的流程:

      • 实现一个监听器 Observer,用来劫持并监听所有属性,如果有变动的,就通知一个订阅者。
      • 实现一个订阅者 Watcher,可以收到属性的变化通知并执行响应的函数,从而更新视图。
      • 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据,以及相应的订阅器,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
    3. 可以结合下面的图来思考这个问题

    在这里插入图片描述

    虚拟DOM跟diff算法

    1. 虚拟dom是根据模板生成的一个js对象,(使用createElement方法),根据这个js对象再去生成真实的dom,对复杂的文档DOM结构,提供了一种方便的工具,最小化进行DOM操
    - 虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性
    - 创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中,所以虚拟DOM对象的节点与真实DOM的属性一一照应
    2. diff算法,当data发生改变时,会根据新的数据生成一个新的虚拟DOM,然后新旧对比,这个对比的过程就是diff算法,找出不同处,也只渲染不同处。diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁
    - 下面是diff对比的示例图:
    - 比较只会在同层级进行, 不会跨层级比较
    在这里插入图片描述
    - 并且这个比较的过程是从数据两边向中间进行
    在这里插入图片描述

    作者会陆续更新相关面试题
    如果有需要补充的地方,欢迎在下方评论区评论

    展开全文
  • VUE 面试题

    2019-04-25 19:23:05
    VUE 面试题 一、对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件,它负责将数据模型转化成UI 展现出来。 ViewModel ...
  • Vue 面试题

    万次阅读 多人点赞 2018-11-30 14:49:12
    Vue面试题 1、Vue总结: vue的使用方式有两种 方式一:像jQuery一样引入使用--vue的特性都可以使用,双向数据绑定 方式二:跟node结合起来使用,使用的时候有点像java语言(面向对象) 2、为什么要使用vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,120
精华内容 2,448
关键字:

vue面试题

vue 订阅