vue面试题总结

92 阅读4分钟

1.Vue的响应式原理

在改变数据的时候,视图会随之更新,意味着我们只需要管理数据。vue是利用Object.defineProperty劫持对象属性的setter 与getter方法,利用发布订阅的设计模式,数据的读操作都会触发 getter 函数,写操作都会触发 setter 函数。

延伸问题: [Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty? Object.defineProperty无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应;Object.defineProperty只能劫持对象的属性,从而需要对每个对象,每个属性进行遍历,如果,属性值是对象,还需要深度遍历。Proxy可以劫持整个对象,并返回一个新的对象。Proxy不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。

2.介绍一下Vue的生命周期

beforeCreate(Vue实例创建前) created(Vue实例被创建完成,可以操作属性,但是dom还不存在) beforeMount(模板编译,虚拟dom渲染完成) mounted(页面、数据渲染完成,真实dom挂载完成) beforeUpdate( 重新渲染之前触发) updated(发生在更新完成之后,当前阶段组件Dom已完成更新。不要再updated 函数里边直接就修改属性,因为这可能会导致无限循环的更新。) beforeDestroy(销毁前执行(实例仍然完全可用),可以进行收尾工作,例如清除定时器) destroyed(销毁后,实例的属性和方法就不能再用了)

3.vue组件的scoped属性的作用,原理

作用:在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的 原理:使用 PostCSS 来实现转换,通过给 dom 增加一个动态属性,然后 css 选择器也额外添加对应的属性来选择该 dom ,达到该样式只作用于含有该属性的 dom,实现组件样式的模块化。

4. vue 属性 data computed watch 这三个属性的区别

data:数据的集合,没有缓存 computed:计算属性,有缓存,有些数据需要进行计算之后渲染在页面上,{{}}中如果进行大量计算就会难以维护,用computed做一些复杂计算 watch:是监听属性,用来监听某一变量,如果被监听的变量发生了变化,我们可以在setter函数做我们想做的事情,如果监听的这个变量是数组或者对象,就要用到深度监听

5.Vue组件data为什么是函数

因为组件是可以复用的,js里对象是引用关系,如果组件里的data是一个对象,那么子组件中的data属性值会相互污染。所以一个组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。

6.谈一谈nextTick的原理

将回调延迟到下次dom更细循环之后执行。在修改数据之后立即使用它,然后等待dom更新。(当data中的某个属性改变的时候,这个值并不是立即渲染到页面上的,而是先放到watcher队列上(异步),只有当前任务空闲的时候才会去执行watcher队列上的任务。) 优点:相对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法

7.组件的通信方式

父子组件通信: 父组件=》子组件:prop,ref,$children 子组件=》父组件:$on/$emit,$parent 兄弟组件: EventBus(事件总线) Vuex

8. vue slot 具体用法 你项目怎么使用slot

slot用于封装组件中,写在子组件 接收父组件动态传递子组件内容片断,slot插槽的使用方法其实就是类似于一个子组件或者标签的引用的过程,在父组件里面定义一个slot,起个name,然后组件引入到子组件,子组件里面有个元素的属性slot值等于name,然后父组件里面没有值的时候就可以显示子组件里面的信息了

9.介绍虚拟DOM(virtual dom)

虚拟DOM就是在真实DOM的基础上建立的一个抽象层,我们对数据和状态所做的任何改动, 都会自动且高效的同步到虚拟DOM中去,Vue对比更新前后的虚拟DOM,记录差异,应用到真正的Dom树上。 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。

10.vue的diff算法

逐层比较,只比较同一层级的节点,若找不到与新节点类型相同的节点,则插入一个新节点,若有相同类型的节点则进行节点属性的更新,最后删除新节点列表中不包含的旧节点。

11.Vue中的key有什么作用

key是给每一个Vnode的唯一id,判断是否为相同节点的一个很重要的条件是key是否相等,如果是相同节点,则会尽可能的复用原有的DOM节点,依靠key,我们的diff算法能够更准确,更快速。