深入理解vue实例

zhengjiesuaibi

已于 2023-05-23 08:10:04 修改

阅读量42

点赞数

文章标签： vue.js javascript 前端

于 2023-04-10 08:21:30 首次发布

本文链接：https://blog.csdn.net/zhengjiesuaige/article/details/130051593

版权

vue生命周期六种函数

Vue实例从创建到销毁的过程，就是生命周期。
也就是：开始创建->初始化数据->编译模板->挂载dom->数据更新重新渲染虚拟 dom->最后销毁。这一系列的过程就是vue的生命周期。所以在mounted阶段真实的DOM就已经存在了。

1.beforeCreate：vue实例的挂载元素el和数据对象data都还没有进行初始化，还是一个 undefined状态
2.created: 此时vue实例的数据对象data已经有了，可以访问里面的数据和方法， el还没有，也没有挂载dom
3.beforeMount: 在这里vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点
4.mounted: vue实例已经挂在到真实的dom上，可以通过对 dom操作来获取dom节点
5.beforeUpdate: 响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的 dom，比如手动移除已添加的事件监听器
6.updated: 虚拟dom重新渲染和打补丁之后调用，组成新的 dom已经更新，避免在这个钩子函数中操作数据，防止死循环。
7.beforeDestroy: vue实例在销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。
8.destroyed：vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。