浅谈浅谈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))的原理实际上就是为了创建一个新的对象重新赋值。
weixin_38742647
- 粉丝: 25
- 资源: 932
最新资源
- 编程程序员年终总结ppt
- 基于JavaWeb技术的在线考试系统设计与实现源码（java毕业设计完整源码+LW）.zip
- 编程的心得体会.pptx
- 编程年度工作总结.pptx
- 基于springboot的车辆管理系统设计与实现源码（java毕业设计完整源码+LW）.zip
- 编程心得体会.pptx
- 大学新学期校园编程大赛活动策划书
- 基于springboot的智能物流管理系统源码（java毕业设计完整源码+LW）.zip
- 敏捷结对编程实践管理资料.pptx
- 新人学PLC编程的心得体会
- 昆仑通态MCGS与3台欧姆龙E5*C温控器通讯程序功能：通过昆仑通态触摸屏，实现对3台欧姆龙E5CC温控器 设定温度值，读取实际温度，设定报警值，设定报警类型，报警上下限功能 反应灵敏，通讯稳定可靠
- 基于springboot的电影评论网站系统设计与实现源码（java毕业设计完整源码+LW）.zip
- 森林草原防灭火指挥系统解决方案（和对讲）PPT(44页).pptx
- 应所需 畅所能——海能达让林业更智慧PPT(25页).pptx
- 智慧林业大数据云平台解决方案PPT(70页).pptx
- 智慧林业智能林火识别预警系统解决方案PPTPPT(65页).pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页