Vue生命周期

最新推荐文章于 2024-09-24 08:43:56 发布

zRJ࿐

最新推荐文章于 2024-09-24 08:43:56 发布

阅读量167

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Zheng______/article/details/107517145

版权

Vue的生命周期包括8个阶段：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。在mounted之前修改数据只会影响虚拟DOM，直到mounted后才会实际渲染到页面上。beforeCreate中不能访问data、computed、watch和methods，而created可以绑定数据并进行初始化ajax请求。beforeMount涉及模板编译，mounted表示实例已挂载到DOM，可用于获取DOM节点。beforeUpdate和updated分别在数据变化前和后触发，用于DOM更新。beforeDestroy和destroyed则分别在实例销毁前和后执行，常用于清理工作。

摘要由CSDN通过智能技术生成

Vue生命周期

一共8个阶段
1、beforeCreate(创建前)
2、created(创建后)
3、beforeMount(载入前）
4、mounted（载入后)
5、beforeUpdate(更新前)
6、updated(更新后)
7、beforeDestroy(销毁前）
8、destroyed（销毁后)
在这里插入图片描述

下面这是几个问题拓展：
问：vue第一次页面加载会触发哪几个钩子函数?
答：beforeCreate、created、beforeMount、mounted
问：DOM渲染在哪个周期中就已经完成?
答：mounted

mounted

1 .在mounted里面修改data里面的数据，并不是想要的直接就拿mounted里面的修改过的值渲染界面，而是还会先拿data里面的初始值进行渲染，然后走beforeUpdate这里拿新的数据进行渲染
2 .这是不是说如果想要修改data里面的数据，要在beforeMounted的时候修改呢
3 .其实beforeMounted也是先按照默认值进行渲染，如果beforeMounted里面修改数据比较慢的话，他是不会等着的，还是会直接执行下一个生命周期函数。也就是说所有的生命周期函数之间没有done的操作
4 .如果在beforeMounted里面加一个setInterval()来延迟修改值的话，也会触发beforeMounted函数