vue.set（）与this.$set（）用法与区别

背景

--

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原型上

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！