Vue.set()学习笔记

第一种场景：
原因：
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。

template:
<ul>
      <li v-for="item in arrData">{{ item.num ? item.num : item }}</li>
</ul>
    <button class="btn" @click="btnChange" type="button" name="button">更改</button>
    <button class="btn" @click="btnReplace" type="button" name="button">替换</button>
    <button class="btn" @click="btnSet" type="button" name="button">set</button>
    <button class="btn" @click="btnPush" type="button" name="button">增加</button>

methods:
btnChange() {
      this.arrData[0] = 6
      console.log('更改后', this.arrData);
    },//不会重新渲染
    btnReplace() {
      this.arrData = [7, 2, 3, 4, 5]
      console.log('替换后', this.arrData);
    },//会
    btnSet() {
      Vue.set(this.arrData, 0, 8)
      console.log('set后', this.arrData);
    },//会
    btnPush() {
      this.arrData.push({ num : 9 })
      console.log('拼接对象后',this.arrData);
    },//会
    add() {
      this.arrDataObject.forEach((item, index) => {
        this.$set(item, 'a', 'hah')
        item.a = 'hah'
      })//会
      console.log(this.arrDataObject);
    }

第二种场景：
原因：由于Vue实例创建时会遍历data里的属性，并且通过Object.defineProperty()拦截数据操作，将属性转为getter/setter，在内部使 Vue 追踪依赖，在属性被访问和修改时通知变化，由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的，所以当实例创建完成后在追加属性，则view层不能响应

const vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

Vue.set(vm.someObject, 'b', 2)

Vue.set()学习笔记

推荐阅读更多精彩内容