没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
一共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生命周期共有几个阶段?分别是什么?生命周期共有几个阶段?分别是什么?
一共一共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
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页