vm.$set函数的个人总结

作用：当改变数组中的数据时，data中已经改变，但是页面不能进行实时渲染。

 此时通过vm.$set的API来进行数组修改后的页面渲染、

1.vm.$set有三个参数  vm.$set(target,propertyName/index,value)

(目标对象，对象的属性名称/数组的下标索引值，要设置的新值)

使用$set改变数组的值

 this.$set(this.list,0,'4')

2.常见问题

1——数组对象通过下标来操作数组中的对象是响应式的

data(){
    list:[
    {    name:"张三",
         age:12
    }，
    {
    name:"李四",
    age:18
    }
    ]
},
mounted(){
    this.list[0].name = "王五"
    }

此时值改变的时候页面也会进行渲染，因为vue的内部针对于数组中对象会通过Object.definProperty来对所有属性进行劫持，来完成响应式，所以数组中对象元素都是响应式的，这里并没有通过数组下标来改变值，只是通过下标来获取相应的对象，而这个对象是响应式的。

2——利用下标操作数组属性也是响应式的？

data(){
    list:[
    {    name:"张三",
         age:12
    }，
    {
    name:"李四",
    age:18
    }
    ]，
    listArr:[1,2,3]
},
mounted(){
    this.list[0].name = "王五";
    this.listArr[0] = 0;
    }

• 在this.list[0]之后，data中的数据已经改变，但实际上视图并没有更新
• 执行到this.list[0].name = "王五"的时候，vm会发现这是响应式操作，会执行内部的observe中的setter，然后通知Dep（订阅器）发生了变化，最终更新视图
• 在对象的更新过程中，检测到数组listArr也发生了变化，但是视图并没有进行更新，此时vm会将listArr的变化也更新到视图

 3.在前面可以发现，不是对象的属性都会被劫持从而称为响应式，为什么还要提供vm.$set来对对象属性进行操作呢？

对于已经创建的实例，Vue不允许动态添加根级别的·响应式property。但是可以使用vm.$set方法向嵌套对象添加响应式property。

 

 知识来源于https://blog.csdn.net/weixin_43242112/article/details/108561587?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166056330716782425151887%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166056330716782425151887&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-108561587-null-null.142^v40^pc_rank_v36,185^v2^control&utm_term=vm.%24set&spm=1018.2226.3001.4187