Vue.set()和this.$set()的介绍及区别

Vue.set()和this.$set()的介绍及区别

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ——钩子函数，实例挂载之后
  this.student.age = 24
}

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
正确写法：this.$set(this.data,”key”,value’)

mounted(){
  this.$set(this.student,'age',24)
}

Vue 不允许动态添加根级响应式属性

const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount('#app1')

Vue.set(app.data, 'b', 2)  //报错

只可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性

var vm=new Vue({
    el:'#test',
    data:{
        //data中已经存在info根属性
        info:{
            name:'小明';
        }
    }
});
//给info添加一个性别属性
Vue.set(vm.info,'sex','男');

Vue.set()和this.$set()实现原理
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()这两个api的实现原理基本一模一样，都是使用了set函数。set函数是从 ../observer/index 文件中导出的，区别在于Vue.set()是将set函数绑定在Vue构造函数上，this.$set()是将set函数绑定在Vue原型上。