Vue 数据响应式

什么是响应式？

Vue 数据响应式也就是vue的data是响应式，例如

const vm = new Vue({data:{n:0})

我如果修改vm.n，那么UI中的n就会变化会响应我，这就是Vue 数据响应式。

数据响应式的实现方法

Vue2是通过Object.defineProperty来实现数据响应式的。

Object.defineProperty可以给对象添加属性value

例如：

let data1 = {}  
Object.defineProperty(data1, 'n', {   value: 0 }) 
//用 Object.defineProperty 给data1定义一个新属性 n

Object.defineProperty可以给对象添加getter/setter

例如：

Object.defineProperty(data2, 'n', {
get(){
return this._n
},
set(value){
if(value < 0) return
this._n = value
}
})

console.log(`需求二：${data2.n}`)
//需求二：0
data2.n = -1
console.log(`需求二：${data2.n} 设置为 -1 失败`)
//需求二：0 设置为 -1 失败
data2.n = 1
console.log(`需求二：${data2.n} 设置为 1 成功`)
//需求二：1 设置为 1 成功

getter/setter用于对属性的读写进行监控

Vue好像有bug？

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 吗？
}}}).$mount("#app");

由于Vue没法监听一开始不存在的obj.b，以上代码中点击set b 不会显示1

解决办法

1. 先把key声明好，在obj中添加b

obj: {
         a: 0,
         b:undefined
}

2. 或者使用Vue.set或者this.$set

setB() {
         Vue.set(this.obj,'b', 1)
         this.$set(this.obj,'b', 1)//这两个任选其一就行
}

数组中新增了key

1. 可以用set来新增key,更新UI（但每次修改数组都要用一次set，不推荐使用）
2. 用Vue中数组的变异方法，包含了7个API，这7个API会自动处理监听和代理，并更新UI

这7个API是：

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