vue-生命周期，前端编程基础教程

生命周期函数中的this指向是vm或组件实例对象

主要的生命周期函数分类：

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

❤️   beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性，vue底层在这儿做了很多东西

❤️   created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板；可以去操作data的数据了，如果不使用dom元素渲染数据，可以在这个周期内调取后台的数据；但是不能获取到dom元素，因此此时的dom元素还没有挂载到页面上

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

vue内部做的事情：会先检测是否有template内部模版，将template渲染成一个render函数

render函数作用：可以将模版的内容转义成虚拟dom，最后再把虚拟dom转成真实的dom

el和template都存在，优先渲染template的内容

vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点

❤️   mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示- 运行期间的生命周期函数：

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

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

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

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

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

学习生命周期

<button @click=“opacity=1”>透明度设置为1

<button @click=“stop”>点我停止变换