浅谈vue生命周期共有几个阶段？分别是什么？_mounted和created那个更先执行 - CSDN文库

5星 · 超过95%的资源 163 浏览量更新于2023-05-05 1 收藏 107KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

浅谈浅谈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

补充知识：补充知识：记录一次记录一次vue数据不同步的排查数据不同步的排查

今天我遇到了一个vue异步获取数据后视图没有更新的问题，排查了很久很久，最后才发现自己踩在了一个自己万万没有想到

的坑上，所以记录一下。

常见的解决方案常见的解决方案

关于vue数据不同步的排查已经有很多类似的博客了，一般而言，原因有一下几点：

数据没有设置成功

设置的数据不是响应式的

设置的数据和视图上的变量不是同一个，可能设置错了变量

既然写到类似话题，我也罗列一下相关的解决方案：

使用this.$set()，

可以尝试类似this.data=JSON.parse(JSON.stringify(data))去排查是不是数据劫持的问题。

这个我一个同事遇到过一次，他发现他的变量里面部分属性没有设置get/set（就是没有被vue监听到，所以无法响应式），原

因大概是他在原变量上加了新属性，但是没有被vue监听到。这是一个很有迷惑性的例子，大家可以看看下面的代码：

这里其实是希望属性b可以被监听到的，所以尝试重新给this.data赋值，但是很遗憾，const data的引用和this.data是同一

个，this.data = data并不能实现变量的覆盖（因为vue只有变量和之前不同才会对变量里面的所有属性做劫持，同一个引

用，vue不会对新属性进行监听）

// 例子

// 假设已经有一个data

{

data(){

return {

data:[{a:1}] }

},

created(){

/* 在这里其实我们是希望将变量覆盖的 */

const data = this.data

data[0].b = 1

this.data = data

}

}

可以看大以下输出，可以看到a属性是有get和set的，即他们已经是响应式的了，但是b却没有get/set。使用

this.data=JSON.parse(JSON.stringify(data))的原理实际上就是为了创建一个新的对象重新赋值。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38742647

粉丝: 25
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈