Vue.set()和this.$set()的区别和联系，什么场景该用哪一个，清晰明了

之前了解这个方法的时候，感觉这一辈子也用不到这个方法，因为当时没有应用场景，但是还真有用的时候🤣，我相信你们也有用到时候。

从三个方面给大家说一下这个this.$set:1.this.$set实现什么功能，为什么要用它？
2.怎么用它？
3.应用场景
1.this.$set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为Vue无法探测普通的新增属性(比如this.myObject.newProperty{=}^{\prime }h{i}^{\prime })，你会发现vue官网是vue.set，我们现在讲的这个this.$set()和它有什么关系呢？咱先说this.$set()，

2.怎么用它？
搞个栗子：

1.vue 中写在标签的代码

2.export default{}中data数据

3.点击按钮触发changeValue方法，

🌹调用方法：this.$set( target, key, value )

🌹 target：要更改的数据源(可以是对象或者数组)

🌹 key：要更改的具体数据

🌹 value ：重新赋的值

4.在没有点击按钮的时候，界面是这样的，虽然界面没有显示出来，但是控制台已经打印出来了

5.当点击按钮的时候，调用this.$set方法，成功显示第三个属性,这就是整个过程啦😁

3.应用场景

当你需要为对象添加一个新属性时，试图不更新，用它！，

4、讲一下vue.set和this.$set区别和联系

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

function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们发现set函数接收三个参数分别为 target、key、val，其中target的值为数组或者对象，这正好和官网给出的调用Vue.set()方法时传入的参数参数对应上。

那一样的用法为什么要两种写法呢？？！

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
Vue 不允许动态添加根级响应式属性。
例如：

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

Vue.set(app.data, 'b', 2

)

正确写法：this.$set(this.data,”key”,value’)

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

```javascript
var vm=new Vue({
    el:'#test',
    data:{
        //data中已经存在info根属性
        info:{
            name:'小明';
        }
    }
});

//给info添加一个性别属性
Vue.set(vm.info,'sex','男');

这就是两者的区别啦，平时this.$set就够用了！

写的不好请多多指正