Vue2-生命周期

79 阅读3分钟

img

1.初始化阶段

大部分都在初始化说过了,这里是拓展

1.Vue如何管理生命周期的钩子函数呢?

Vue会把相同的钩子函数合并成数组(如Mixin混入的全局钩子函数),之后再通过callHook函数,把钩子函数名称传递进去,之后找到对应的数组遍历调用。

2.initEvents原理

父组件既可以给子组件上绑定自定义事件,也可以绑定浏览器原生事件。这两种事件有着不同的处理时机,浏览器原生事件是由父组件处理,而自定义事件是在子组件初始化的时候由父组件传给子组件,再由子组件注册到实例的事件系统中。

3.initInjections原理

1.首先先调用resolveInject方法,将组件实例的inject标准化处理,最后返回一个对象。

2.遍历对象,将键值添加到当前的实例上,这个过程不是响应式的。

4.initComputed原理

1.首先先去遍历用户创建的computed,为每一个键值创建一个watcher,但是这个watcher不会立即执行getter函数,也就是不会先产生依赖。

2.之后拦截get和set方法,set一般是用户自己定义的,get则是用了一个高阶函数,这个高阶函数返回了一个函数,这个函数里面会先去通过key读取对应的watcher,之后收集依赖,再去计算值。

在收集依赖的过程中,如果有上一个Watcher读取到了自己(依赖),那么就将计算属性的watcher添加到上一个watcher的依赖列表中,计算属性的Watcher的订阅列表添加上一个Watcher。当计算属性的Watcher的数据发生变化的时候,会先去调用update方法,之后去获取旧值和新值,之后再调用notify方法,通知页面更新。

计算值的过程中,会先去判断是否已经计算过值了,如果没有就去计算值,之后将dirty设置为false,如果有,就返回值。dirty只有在值改变的时候才会设置为true。

2.请说说Vue的编译阶段如何处理的?

具体原理在编译器会说,大致就是将用户的template编译为render函数,之后运行render函数生成vnode节点,在挂载到页面上。

3.请说说Vue的挂载阶段如何处理的?

1.先调用beforeMount钩子函数。

2.定义一个updateComponent函数,这个函数主要负责更新视图数据。

3.创建一个Watcher,这个Watcher在读取数据的时候会触发getter方法,也就是updateComponent函数,这个函数在读取其他数据的时候,其他数据会将这个Watcher添加到依赖列表里面,等到将来值发生变化的时候,会通知该Watcher进行更新。在更新数据之前,会先调用beforeUpdate这个钩子函数。

4.判断组件vnode是否创建过了,如果没有创建就调用mounted钩子函数。

4.请说说Vue的的销毁阶段如果处理的?

1.先调用beforeDestroy钩子函数

2.从父组件里面把当前的组件移除

3.先将组件对其他数据的依赖列表里面,把组件移除。其他数据对组件的依赖列表里,也把组件移除。(双向移除)

4.调用vm.patch,销毁组件

5.调用destroyed钩子函数

6.调用vm.$off方法,移除所有事件上的监听器