脚本宝典收集整理的这篇文章主要介绍了Vue中响应式数据失效&Dom操作无效问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

响应式数据失效问题

• 原因分析：响应式数据被“遗失”

在vue中响应式数据是在初始化时定义在data中，这会使数据变成响应式毫无疑问。
正是这种自信导致当数据发生异常，没有按照预期响应时，我们可能会一脸懵逼，各种找原因。
对于这种问题回归问题本质（其实其它很多问题也是如此），既然数据未按预期响应，肯定是数据本身出了差错：

1. 数据在其它多个地方响应了变化，导致不是“当前”预期值
2. 已经脱离响应式

• 实战分析：响应式数据被“遗失”

假设在data上存在formModel = { name: '', age: '', addr: '' } 通过v-model绑定在表单中。
随后我们去后台拉取数据填充formModel, 可能会这样操作【 this.formModel = response.data 】,咋一看没什么问题，
除非response.data中有所有formModel中的字段，否则缺失的字段就会失去响应，
比如 response.data = { name : '', age: ''}，此时formModel中的addr就失去响应。

这种问题既简单又难于发现！

我的解决办法： 继承 Object.assign()

eg: this.formModel = Object.assign(this.formModel, response.data)

Dom操作异常

vue采用虚拟dom技术来渲染响应页面，因此dom刷新是个异步动作。
我们在开发中不免会有操作dom，为了保证dom操作能够给正确被处理，需要等待dom正在挂载后再进行操作，
即：把相关操作放入nextTick
this.$nextTick(() = > {

    // dom operation ...
    
    // dom crud
    
    // dom event
    
 })

脚本宝典总结

以上是脚本宝典为你收集整理的Vue中响应式数据失效&Dom操作无效问题全部内容，希望文章能够帮你解决Vue中响应式数据失效&Dom操作无效问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。