Vue(四)——组件生命周期、ref与$refs、nextTick

一、组件生命周期

图示解析：

此图为vue官网提供的vue生命周期的整个过程：

1. 组件最开始从new Vue()开始组件生成对象开始，当然也可以是从Vue.component()构建组件对象开始，两者没有多大区别。在 new Vue()时就相当于在执行构造函数，在构造函数中，即从组件创建到组件最后出现，并可以使用经历了很多过程；
2. init Events & Lifecycel：初始化一些数据、事件、生命周期等，可以认为是属性初始化或工具初始化；
3. 完成以后就会去执行beforeCreate函数；
4. init injectiongs&reactivity ：beforeCreate函数调用完成后，就会再去初始化注入依赖、数据拦截等；
5. 完成后就会去执行created函数，即vue组件构建完成；以后所以环节已经将vue组件的所有核心内容准备好；
6. 判断当前是否有el选项，有则继续判断是否有template选项；无则通过$mount(el)手动渲染组件；
7. el和template都准备好以后，就会进去组件编译阶段（compile template into render function)，对组件模块进行编译加载；
8. 整个组件编译完后，产生了整个DOM节点后，会调用beforeMount()方法，
9. 调用beforeMount()方法就会进行挂载，挂载到父级el选项中，并给vue的组件实例增加el选项；
10. 整个挂载完成后，调用mounted()，进行组件的渲染。
11. 到此为止从组件的首次初始化，首次渲染，再到首次挂载到页面中的整个过程，执行完成
12. 最后进入一个循环阶段，称为更新阶段；组件挂载完成后并不是不做任何事了，而是不断去监听组件的各种数据和状态变化、更新
13. 当数据发生改变时，就会触发beforeUpdate()，执行完成就，组件就会对DOM进行重新渲染（Virtual DOM re-render and patch）
14. 渲染完成后执行update，重新更新组件
15. 后续整个工作过程都是不断执行更新组件这个过程，直到进行组件销毁，此时就会触发beforeDestroy()；
16. 销毁时触发destroyed()方法真正销毁组件

 

组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法

基本生命周期函数有下面几个阶段：

• 创建阶段
• 挂载阶段
• 更新阶段
• 卸载阶段

每一个阶段都对应着 之前 和 之后 两个函数

1.1创建阶段

1.1.1 beforeCreate()

初始化阶段，应用不多。

此时，只初始化了组件的时间和生命周期等基本的东西，还无法获取组件的data和el数据，此时这些都还没有准备好

1.1.2 created()

在实例创建完成后被立即调用，该阶段完成了对 data 中的数据的 observer，该阶段可以处理一些异步任务。

但是此时el还没有准备好（要一直到beforeMount()后才准备好），所以这个阶段只能去处理一些与DOM操作无关的事情

1.2挂载阶段

1.2.1 beforeMount()

在挂载开始之前被调用，应用不多。

此时已经可以访问数据和el等。注意：此时数据和el都已解析完成，但是还没有挂载到页面中，如果此时要去获取元素宽高等属性不一定能获取到。

如果有子组件，则根组件在执行完beforeMount()后，会先将子组件从beforeCreate()执行到mounted()渲染完成后，再执行根组件的mounted()函数。

1.2.2 mounted()

该阶段执行完了模板解析，以及挂载。同时组件根组件元素被赋给了 $el 属性，该阶段可以通过 DOM 操作来对组件内部元素进行处理了。

1.3更新阶段

1.3.1 beforeUpdate()

数据更新时调用，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态

1.3.2 updated()

由于数据的变更导致的视图重新渲染，可以通过 DOM 操作来获取视图的最新状态

1.4 卸载阶段

1.4.1 beforeDestroy()

实例销毁之前调用，移除一些与组件无关的，不必要的冗余数据，比如定时器。

与组件有关的，如prop数据等，会自动销毁

1.4.2 destroyed()

Vue 实例销毁后调用。

1.4.3 errorCaptured()

当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

由自己捕获并处理错误。

最后使用