面试准备(6)vue专题

响应式数据的原理

核心点Object.defineProperty

vue在data中初始化数据时,会给data中的属性使用Object.defineProperty重新定义属性。

当页面取到对应属性时,会进行依赖收集,如果属性发生变化则会通知想关依赖进行操作。

vue如何检测数组变化?

1.使用函数劫持的方式,重写了数组的方法。

2.Vue将data中的数组,进行了原型链重写,指向了自己定义的数组原型方法,这样当调用数组api时,

可以通知依赖更新。如果数组中包含引用类型,会对数组中的引用类型再次进行监控。

3.vue之所以无法监听数组的变化,原因就是受js的限制,但是vue也有解决办法,可以通过vue.set()去解决,使其做响应式变化。

为什么vue采用异步渲染

因为vue是组件级更新,若是不采用异步更新,每次更新数据都会对当前组件进行重新渲染,

所以为了性能考虑,vue会在本轮数据更新后,再去异步更新视图。

nextTick的实现原理是什么?

在下次DOM更新循环结束之后执行的延迟回调。

作用:
nextTick用于下次Dom更新循环结束之后执行延迟回调,在修改数据之后使用nextTick用于下次Dom更新循环结束之后执行延迟回调,

在修改数据之后使用nextTick,则可以在回调中获取更新后的DOM。

应用场景:

需要在视图更新之后,基于新的视图进行操作。

实现原理:

nextTick方法主要是使用了宏任务和微任务,定义了一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法清空队列。

在vue中有nextTick这个API,官方解释,它可以在DOM更新完毕之后执行一个回调。

一般使用:

this.$nextTick(() => {

    ...

})

vue中computed的特点

默认computed也是一个watcher 是具备缓存的,只有当依赖的属性发生变化才会更新视图。

生命周期

生命周期什么时候调用

beforeCreate:在实例初始化之后,数据观测之前被调用。

create:实例已经创建完成之后调用,已完成数据观测,属性和方法的运算,这里没有$el。

beforeMount:再挂载之前被调用,相关的render函数首次被调用。//template

mounted:el被新创建的vm.$el替换,并挂载到实例上去,调用该钩子。

beforeUpdata:数据更新时调用,发生在虚拟DOM重新渲染之前。

updata:由于数据更改导致的虚拟DOM重新渲染,在这之后会调用该钩子。

beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用。

destroyed:vue实例销毁后调用。调用后,vue实例的所有东西都会解除绑定,

           所有的事件监听器都会被移除,所有的子实例也会被销毁。

生命周期内部可以做什么事情:

create:实例已经创建你完成,可以进行一些数据资源的请求。

mounted:实例已经挂载完成,可以进行一些DOM的操作。

beforeUpdata:可以在这个钩子内进一步的更改状态,这不必会触发附加的重渲染过程。

update:可以执行依赖DOM的操作,大多数情况下应该避免在此期间更改状态,以为这可能导致更新无限循环。

     该钩子在服务器渲染期间不被调用。

destroyed:可以执行一些优化操作,清空计时器,解除绑定事件。

vue中的diff算法

1.先同级比较,再比较子节点。

2.先判断一方有儿子一方没儿子的情况。

3.比较都有儿子的情况。

4.递归比较子节点。

原文地址:https://www.cnblogs.com/loveliang/p/13891179.html