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
都用的是set方法 set(target、key、val);，区别在于Vue.set()是将set函数绑定在Vue的构造函数上，this.$set()是将set函数挂载在Vue原型上。

源码分析
1.如果当前环境不是生产环境并且 等于undefined或者null 或 target的数据类型是string、number、symbol、boolean中的一种，那么就抛出错误警告。
2.如果key本来就是对象中的一个属性，并且key不是Object原型上的属性。说明这个key本来就在对象上面已经定义过了的，直接修改值就可以了，可以自动触发响应
target为数组 数组的长度设置为target.length和key中的最大值 防止越界
defineReactive(ob.value, key, val)
ob.dep.notify()
return val
3.defineReactive(ob.value, key, val)的意思是给新加的属性添加依赖，以后再直接修改这个新的属性的时候就会触发页面渲染。　ob.dep.notify()这句代码的意思是触发当前的依赖，所以页面就会进行重新渲染

<template>
    <div class="about">
        <div>{{arr[0]}}</div>
        <div>{{obj.c}}</div>
        <button @click="changeObj">修改对象</button>
    </div>
</template>
<script>
    
    export default {
        name: 'about',
        data() {
            return {
                arr:[1],
                obj: {
                    a: 1,
                    b: 2
                }
            }
        },
        methods: {
            changeObj() {
                // this.arr[0]=2;视图不更新
                this.$set(this.arr, 0, 2);
                // this.obj.c = 999;  视图不更新
                this.$set(this.obj, 'c', 999);
            }
        }
    }
</script>