Vue异步获取数据后初始化数据不能及时更新

我会带着你远行 2021-08-19 21:44 718阅读 0赞

**1.钩子函数尽量使用mounted来完成初始化函数，根据vue的生命周期尽量不要用mounted之前的**

**2.对于可能要改变的值，最好直接写到data\{\}中，比如这样写：**![20190823141505871.png][]

而不是在mounted中这样写

![20190823141539250.png][]

这个问题发现于修改一处input绑定的对象属性，另外一处\{ \{person.name\}\}不能及时更新，vue似乎只会对第一层（这里的m80）的数据进行实时更新，如果想让他对第二层（m80里的m8006等字段）实现双向绑定必须写到data\{\}里

**3.如果还不能实时更新，通过vue的官方$set方法可以实现手动设置**

**4.一些特殊set方法，比如其他js框架的set方法，会和vue的方法冲突造成数据不能同步**

总结：学习Vue还是得脚踏实地好好补一下基础，这里我记得最初看例子就是把对象定义到data里的，后来就忘了

官方解释：[https://cn.vuejs.org/v2/guide/reactivity.html][https_cn.vuejs.org_v2_guide_reactivity.html]

vue生命周期：[https://blog.csdn.net/chasenzh/article/details/78045330][https_blog.csdn.net_chasenzh_article_details_78045330]

参考：[http://www.fly63.com/article/detial/864?type=3web][http_www.fly63.com_article_detial_864_type_3web]

[20190823141505871.png]: /images/20210720/64f0acb8e0714643997e0045d42a2d5a.png
[20190823141539250.png]: /images/20210720/fb71b858b16f4e1c9b47c2e534e70a44.png
[https_cn.vuejs.org_v2_guide_reactivity.html]: https://cn.vuejs.org/v2/guide/reactivity.html
[https_blog.csdn.net_chasenzh_article_details_78045330]: https://blog.csdn.net/chasenzh/article/details/78045330
[http_www.fly63.com_article_detial_864_type_3web]: http://www.fly63.com/article/detial/864?type=3web