Vue中this.$set与this.$nextTick()的使用

• 最近写代码碰到了数据响应式丢失的问题，刚开始还以为是值绑定错了/代码逻辑写错了，结果是由于数据是额外添加导致的，这次就记录下错误出现原因，加深下印象。

1. this.$set

1.1 Vue响应式的局限性

• 对于对象：Vue 无法检测对象元素的添加或移除。由于 Vue 会在初始化实例时对对象元素执行 getter/setter 转化，所以对象元素必须在 data 对象上存在才能让 Vue 将它转换为响应式的

• 对于数组：当你利用索引直接设置一个数组值时this.items[indexOfItem] = newValue，当你修改数组的长度时this.items.length = newLength

• 注：this.$set()是Vue.set()别名

1.2 对象形式的实际例子演示

data() {
    return {
        obj:{name:'zs'}
    }
  }
  // 错误演示
  methods: {
   drag(){
    this.obj.age = 18
  }
}
// 正确演示
// this.$set(要添加数据的对象, key值, 数据)
  methods: {
   drag(){
    this.$set(this.obj, 'b', 18)
    // 或者这样
    this.obj= Object.assign({}, this.obj, {  b: 18 })
  }
}

Vue 无法检测对象元素的添加或移除，所以这样也会丢失响应式

data() {
    return {
        this.stockList:[{name:'zs' ,id:'1'},{{name:'ls' ,id:'2'}],
        this.stockArray:[{name:'zs' ,id:'1',maxLimit:'新字段'},{{name:'ls' ,id:'2',maxLimit:'新字段'}]
    }
  }
  // 错误演示
  methods: {
   drag(){
     this.stockList.map((item) => {
     const newData = this.stockArray.find(x=>x.id===item.id)
      if (newData) {
       item.maxLimit = newData.maxLimit
      }
    })
  }
}

  // 正确演示
  methods: {
   drag(){
     this.stockList.map((item) => {
     const newData = this.stockArray.find(x=>x.id===item.id)
      if (newData) {
       this.$set(item,"maxLimit", newData.maxLimit)
      }
    })
  }
}

以上可以看到，首先数组this.stockList与数组this.stockArray进行了遍历，如果符合条件，数组this.stockArray就会把maxLimit字段传递给数组this.stockList,看起来是不是很正常，但this.stockList里面是没有这个maxLimit的，这条数据属于额外新增字段，Vue并不会对其进行响应式变化。

1.3 数组形式的实际例子演示

data() {
    return {
        itemList: ['a', 'b', 'c']
    }
  }

// 错误示范
this.itemList[3] = 'd' // 不是响应性的
this.itemList.length = 2 // 不是响应性的

//正确示范
this.$set(this.itemList, 3, 'd' )
this.itemList.splice(删除位置, 删除几个,要添加的元素)) // 如果只传索引则从索引位置后删除之后的元素

• 当然，可能有时候往 数组对象 里动态添加子数组，此时需要面对的不单单是添加数据的问题，还要指定key值，此时演示另一个办法，不指定位置，但指定key值。

demo() {
      // 演示数据
      const children = [{ name: "子级" }, { name: "子级" }, { name: "子级" }];
      const list = [{ name: "演示" }, { name: "演示" }, { name: "演示" }];
      // 循环添加  // 可根据条件判断是否添加
      list.forEach((x) => {
        this.$set(x, "children", children);
      });
      console.log(list);
    },

• 如果不使用$set()则子级属于动态添加的，不会触发界面的渲染。
  

  效果图

2 . this.$nextTick()

• Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。为了在数据变化之后等待 Vue 完成更新 DOM再更新数据，那么就建议使用this.$nextTick()

2.1 数据演示

• 以下为模拟代码

<template>
  <div class="">
    <div>{{value}}</div>
    <button @click='btn'>点击</button>
  </div>
</template>

<script>
export default {

  data () {
   return {
     value:'原始数据',
   }
  },
 
  methods: {
    btn(){
      this.value='我更新了?'
      console.log(this.$refs.val.innerText);
      this.$nextTick(()=>{
      this.value='我更新了'
      console.log(this.$refs.val.innerText);
      })
    }
  },
}
</script>

以上可以看到，当点击后直接进行赋值操纵，由于Dom还没进行更新，所以打印出的还是原始数据，当把赋值放在this.$nextTick()里就不一样了，这样回调函数将在 DOM 更新完成后被调用。

2.2 官方详细说明传送门 -- 深入响应式原理 — Vue.js -- 个人比较推荐直接看官方文档。