vue中this.$set,Vue.set()
我们发现Vue.set()的实现原理和这个。$set()基本都一样，那么Vue.set()和这个有什么区别。$set()？本文将详细介绍，有兴趣的可以了解一下。
在用vue开发的过程中，我们可能会遇到这样一种情况：当vue实例生成后，当数据再次赋值时，有时不会自动更新到视图中；当我们看vue文档的时候，会发现一句话：如果在实例创建之后添加了新的属性，不会触发视图更新。下面的代码将age属性添加到student对象中。
data () {
返回{
学生：{
名称： ，
性别：“”
}
}
}
Mounted () {//——钩子函数，在实例装入后
学生年龄=24岁
}
受ES5限制，Vue.js无法检测对象属性的添加或删除。因为Vue.js在初始化实例时会将属性转换为getter/setter，所以该属性必须在数据对象上才能让Vue.js转换它并使其响应。
正确写法：这个。$ set (this.data，" key "，value )
已安装(){
这个。$set(这个学生，“年龄”，24岁)
}
* Vue不允许动态添加根级响应属性。
例如：
const app=new Vue({
数据：{
答：1
}
//render: h=h(Suduko)
}).$ mount(“# app 1”)
Vue.set(app.data， b ，2)
只能使用vue.set (object，propertyname，value)方法向嵌套对象添加响应属性，例如
var vm=new Vue({
el:#test ，
数据：{
info根属性已经存在于//数据中
信息：{
姓名：‘小明’；
}
}
});
//向信息添加性别属性
Vue.set(vm.info，性别，男性)；
Vue.set()和this的实现原理。$set()
我们先来看看Vue.set()的源代码：
从导入{ set }./观察者/索引
.
Vue.set=set
.
让我们来看看这个的源代码。$set():
从导入{ set }./观察者/索引
.
Vue.prototype.$set=set
.
结果我们发现Vue.set()的实现原理和这个。$set()基本相同，都使用set函数。集合函数是从./观察者/索引文件。不同的是Vue.set()将set函数绑定到Vue构造函数，而这个。$set()将set函数绑定到Vue原型。
函数集(target: Arrayany Object，key: any，val: any): any {
if (process.env.NODE_ENV！==生产
(isUndef(target) isPrimitive(target))
) {
warn(`无法对未定义、null或原始值设置反应属性：${(target: any)} `)
}
if(array . is array(target)isValidArrayIndex(key)){
target . length=math . max(target . length，key)
target.splice(键，1，值)
返回值
}
如果(键入目标！(在Object.prototype中键入)){
目标[键]=值
返回值
}
const ob=(target: any)。__ob__
如果(目标。_ is vue (ob . ob . VM count)){
process.env.NODE_ENV==生产警告(
避免向Vue实例或其根$data添加反应性属性
在运行时-在数据选项中提前声明。
)
返回值
}
如果(！ob) {
目标[键]=值
返回值
}
defineReactive(ob.value，key，val)
业务部门通知()
返回值
}
我们发现set函数接收三个参数，分别是target、key和val，其中target的值是一个数组或者一个对象，正好对应官网给出的调用Vue.set()方法时传入的参数。
参考：
在vue变化检测问题中遇到Pit(数组相关)
关于Vue.set()和this的使用和区别的这篇文章到此为止。$set()。关于Vue.set()和this的更多信息。$set()，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。