背景
vue初始化实例对象的时候会把属性转为setter/getter,这样数据才会是动态响应的(即data中的数据是动态响应的),vue才能够监听到属性的添加、删除、修改(受ES5的限制)
原理
vue.set源码 import { set } from '../observer/index' ... Vue.set = set ...
this.$set源码
import { set } from '../observer/index' ... Vue.prototype.$set = set ...
区别
vue.set
- vue.set可以设置
实例创建之后添加的新的属性
(即在data中未声明,vue实例创建时在beforeCreate之后,created之前,监听data对象数据变化,并初始化vue内部事件) - vue.set不允许添加根级响应式属性,只可以向嵌套对象添加响应式属性
- vue.set是将set函数绑定在vue构造函数
this.$set
this.$set只能设置实例创建后存在的数据(数据已经在data中)
- 将set函数绑定在vue原型上