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
    
 })