浅析vm.$set方法

先上官方文档：

vm.$set( target, propertyName/index, value )

• 参数：

• {Object | Array} target

• {string | number} propertyName/index

• {any} value

• 返回值：设置的值。

• 用法：

这是全局 Vue.set 的别名。

• 参考：Vue.set

set方法简单的来说是给一个目标（Object|Array）新增一个属性
下面来一段代码示意

let array=[];
vm.$set(array,0,'newVal')
//结果 ['newVal'];

这和

let array=[];
array[0]='newVal';
//结果 ['newVal'];

形式上完全一致,究竟区别如何？
接下来用一个小项目的形式告诉你set有什么用。
template模板部分

 <div id="app">
    <button @click="change">change</button>
     {{arrayVal}}  -- {{objVal}}
  </div>

javascript部分

export default {
  name: "App",
  data: function() {
    return {
      arrayVal: [],
      objVal:{}
    };
  },
  methods: {
    change() {
      this.arrayVal[0]="新增内容"
      this.objVal['newItem']='新增内容'
      // this.$set(this.arrayVal,0,'新增内容')
      // this.$set(this.objVal,'item','新增内容')
    },
  },
  components: {
  },
};

网页界面部分

改变前.png

当你点击change时，界面完全没有任何变化，但当你看控制台却发现数据确确实实填充了进去。

改变后.png

这是vue的锅吗？其实不是
之所以会出现这个现象是因为直接ES5已经舍弃了Object.observe方法，Vue无法监听对象属性删除和新增，故即使使用deep方法监听对象prop也没有用。
打开注释

 methods: {
    change() {
      // this.arrayVal[0]="新增内容"
      // this.objVal['newItem']='新增内容'
      this.$set(this.arrayVal,0,'新增内容')
      this.$set(this.objVal,'item','新增内容')
    },
  },

再次点击

image.png

数据就正确的渲染到了界面上。

总结：vm.$set方法可以使原来对象和数组的无法监听变的可监听，使数据正常渲染。