本来想从这就开始写关于vue的模板语法的，但是思前想后，觉得还是应该先学习一下vue的完整生命周期，随便写一下，想到哪儿就写到哪儿。
先写一下页面显示的几个阶段。
1.生成DOM树(包括display:none的节点)。
2.在DOM树的基础上根据节点的属性生成Render树（不包括display:none，head节点，包括visibilty:hidden的节点）
3.在render树的基础上继续渲染颜色，背景色等样式。
每个 Vue 实例在被创建时都要经过一系列的初始化过程。
这个完整的生命周期图片太长了，我们从每一个钩子截图看一下。
1.beforeCreate
beforeCreate
实例或组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真实的dom，我们一般不会在此处进行任何操作。
2.created
created
在执行完成beforeCreate之后，vue会进行初始化事件，进行数据的观测，在这时数据已经和data的属性绑定了，你改变data的属性，同时视图也会随着更新。我们一般在这个钩子里获取数据进行初始化。
这时还没有$el
3.beforeMount
beforeMount
这个阶段发生了很多事情。
首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)才继续向下走。
在这个函数中虚拟Dom已经创建完成，马上开始render()
为什么先判断el然后判断template?
vue需要通过el找到对应的outer template
渲染的优先级如下：
render函数选项 > template选项 > outer HTML.
4.mounted
mounted
在mounted之前，template模板中还是通过{{data}}进行占位的，因为此时还没有挂在真实dom上，还是以JS中的虚拟dom存在的。
接下来开始render()，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom。
4. beforeUpdate &updated
beforeUpdate &updated
当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。
当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom。
4.
beforeDestroy
&
destroyed
beforeDestroy & destroyed
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。我们在这一步一般进行一些清除定时器一类的操作。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
网友评论