1.创建实例之前：BeforeCreate函数：
在Vue实例创建后触发，这个时候的this不能用，在data中的数据methods的方法，还有watch中的事件都获取不到。
2.创建实例之后：Created函数：
实例已经创建完成了，实例对象已经完成了，这时候可以访问 data中的数据 以及 methods中的方法和 watch 中的事件了。
这个时候虽然已经可以使用到数据，也可以更改数据，但是在这里同步修改数据不会触发updated函数，一般可以在这里做初始数据的获取。
3.模板渲染之前：beforeMount：
在这个时期进行模板编译，但是没有元素挂载，无法获取DOM。并且在这个函数中虚拟dom已经创建完成，即将渲染。
在这里也可以修改数据，不会触发updated，这是在渲染之前最后一次更改数据的机会。
4.渲染之后：mounted:
挂载完毕，渲染出了真实的dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据，真实dom都已经处理完毕，一些对dom的操作这时候才可以进行。
5.更新数据之前：beforeUpdate
当组件或者实例的数据更改之后，会立即执行beforeUpdate，也就是说数据更新了，但是vue中的组件对应dom内部中的数据没有变，所以说叫做组件更新前。
6.更新数据之后：updated
组件更新完成之后的操作，Vue中的组件已经对应dom内部中的数据了，可以继续操作更新之后的dom。
7.销毁实例之前：beforeDestroy
当经过某种途经调用destroy（）方法之后，会立即执行beforeDestroy，一般在这里做一些善后的工作，比如清除计时器，清除非指令绑定的事件等，在这个时候实例还是可以用的。
8.销毁实例之后：destroyed
Vue实例销毁之后执行，Vue实例销毁之后，dom元素还存在，但是数据双向绑定，Vue的功能没有了，dom只剩下空壳。
1.create和mounted
见图1
beforeCreated：el和data并未初始化。
created：完成了data数据的初始化，el没有。
beforeMount：完成了el和data的初始化。
mounted：完成了挂载。
见图2
我们还发现，在beforeMount阶段，el还是{{message}}，这里应用的是虚拟Dom技术，到后面mounted挂载的时候再把值渲染进去。
2.update
见图4
点击更新按钮之后，触发beforeUpdate事件，此时，data的数据并未发生改变，而是view层的数据发生变化。
见图5
此处，页面中的文字已经发生了改变，说明Updated事件已经发生。
3.destroy
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/182223.html