一、什么是响应式

一个物体受到外界的刺激，做出相应反应，就是响应式。

二、Vue 的 data 是响应式的

const vm = new Vue({
    data:{n:0}
})
  1. 如果修改vm.n,那么UI中的n就会相应我。
  2. Vue2通过Object.definedProperty来实现数据响应式。

三、Object.definedProperty 是什么

Object.definedProperty

  1. 可以给对象添加属性、value
  2. 可以给对象添加getter和Setter
  3. getter和Setter用于对属性的读写进行监控

用法

let obj = {
    姓:'高',
    名: '圆圆',
    get 姓名() {
        return this.姓+this.名
    },
    set 姓名(xxx) {
        this.姓 = xxx[0],
        this.名 = xxx.substring(1)
    }      
}

let _xxx = 0

Object.defineProperty(obj, 'xxx', {
    get() {
       return _xxx
    },
    set(value) {
        return _xxx = value 
    }
})
obj.姓名 = '刘诗诗'
console.log(obj)//{姓: "刘", 名: "诗诗"}

四、Object.definedProperty 有一个问题

Object.definedProperty(obj,'n',{...})

  1. 必须有一个’n’,才能监听或代理obj.n
new Vue({
    data: {
        obj: {
           a:0 //obj.a 会被Vue监听
       }
    },
    template: `
    <div>
    {{obj.b}}
    <button @click="setB">set b</button>
    </div>
    `,
    methods: {
        setB() {
            this.obj.b=1 //页面不会显示1，因为data里没有b
        }
    }
}).$mount('#app')

（二）怎么解决这问题

1 把要用的key提前声明好

2 使用Vue.set或this.$set

作用
  1. 新增key
  2. 自动创建代理和监听
  3. 触发UI更新
示例
this.$set(this.object,'m',100)

五、data中有数组

1 没有办法提前声明key

  1. 数组的长度可以一直增加，下标就是key
  2. 所有只剩第二种方法，用set。
  3. 但是，我们不能每次都用Vue.set，数组里的key也许会很多

2 因此尤雨溪篡改了数组API，七个变异方法

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

小结

这7个API都会被Vue篡改，调用后回更新UI

六、总结

1 对象中新增的key

Vue没有办法事先监听，可以提前写好key，或者用set来新增key，更新UI

2 数组中新增key

  1. 可以用set
  2. 但是最好用尤雨溪篡改的7个API，更方便。