108、Vue2.0 $set()的正确使用方式

• 问题： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。也就是如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
• 原因：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
• 对数组或者对象进行操作时，发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。
• 这种情况下，Vue 不能检测以下变动的数组
  当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  当你修改数组的长度时，例如：vm.items.length = newLength
• 比如： 使用this.arr[0] 去更新array的内容，视图没有刷新
  使用Vue.set(this.arr, 0, !this.arr[0]) 去更新array的内容，视图被刷新
  使用 this.arr[0] = !this.arr[0] 和 this.obj.a = !this.obj.a 同时更新，视图被刷新
• 结论：如果方法里面单纯的更新数组Array的话，要使用Vue.set，如果方法里面同时有数组和对象的更新，直接操作data即可
• 例子：

  



  

   

     
{{item}}
   
   按钮
  

点击页面没刷新：

改成一下写法：

 methods: {
      changeData() {
        this.$set(this.data,2,'娜美');
        // Vue.set(this.data,2,'娜美');
        // this.data.splice(2,1,'娜美');
      }
    }

• 结论：
  响应系统 ,会把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter，未实例化的属性，修改其值，是不会更新到视图上面的

• 原理：
  每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

  
  

• 受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

• 写法

Vue.set 参数
参数：

{Object | Array} target
{string | number} key
{any} value
返回值：设置的值。

• Vue.set()和this.$set()的区别：
  1. 实现原理
     Vue.set()源码：

import { set } from '../observer/index'
...
Vue.set = set
...

this.$set()源码

import { set } from '../observer/index'
...
Vue.prototype.$set = set
...

结果我们发现Vue.set()和this.set()是将set函数绑定在Vue原型上