vue开发----vue生命周期详解

最近在回顾vue相关知识点，发现对生命周期" title="vue生命周期">vue生命周期了解的还不是很透彻，现在根据一些大佬的总结再对比一下vue的官方文档，自己也总结了一下，理解透彻才不会在开发过程中犯下一些低级的失误。

1.创建期间的生命周期函数：

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板

beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 

mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数：

beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点

updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了

3.销毁期间的生命周期函数：

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

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

在编译模版期间有一些需要注意的点：

在看这些注意点之前先看一下vue官网对模版相关的三个属性：

el ：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

template ：一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

render ：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

1.为什么el属性的判断在template之前？

因为el是 Vue 实例的挂载目标，vue实例需要用这个el去template中寻找对应的DOM。

2.渲染优先级：render函数 > template属性 > 外部html

3.vue编译过程——把tempalte编译成render函数的过程