文章包含以下三部分：
- Vue 数据响应式的含义
- 如何做到数据响应式
- 如何给数据新增key
Vue 数据响应式的含义
Vue 能实现对实例中声明过的数据进行监听。当数据发生变化时，视图会根据变化内容重新渲染页面，从而简化使用者的工作。
如何做到数据响应式
通过 object.defineProperty()，配合 getter 和 setter 实现监听，同时引入代理，负责对象的属性读写
示例👇
// 需求五：就算用户擅自修改 myData，也要拦截他
let myData5 = {n:0}
let data5 = proxy2({ data:myData5 }) // 括号里是匿名对象，无法访问
function proxy2({data}{
let value = data.n
Object.defineProperty(data, 'n', {
get(){
return value
},
set(newValue){
if(newValue<0)return
value = newValue
}
})
// 就加了上面几句，这几句话会监听 data
// data5 就是 obj
console.log(`需求五：${data5.n}`)
myData5.n = -1
console.log(`需求五：${data5.n}，设置为 -1 失败了`)
myData5.n = 1
console.log(`需求五：${data5.n}，设置为 1 成功了`)
getter 和 setter 方法
get 和 set 都是函数，当属性被访问和赋值时，会触发对应的函数
示例👇
let obj0 = {
姓: "高",
名: "圆圆",
age: 18
};
// 需求一，得到姓名
let obj1 = {
姓: "高",
名: "圆圆",
姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求一：" + obj1.姓名());
// 高圆圆
// 姓名后面的括号能删掉吗？不能，因为它是函数
// 怎么去掉括号？
// 需求二，姓名不要括号也能得出值
let obj2 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求二：" + obj2.姓名);
//高圆圆
// 总结：getter 就是这样用的。不加括号的函数，仅此而已。
// 需求三：姓名可以被写
let obj3 = {
姓: "刘",
名: "诗诗",
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx){
this.姓 = xxx[0]
this.名 = xxx.slice(1)
},
age: 18
};
obj3.姓名 = '刘诗诗'
console.log(`需求三：姓 ${obj3.姓}，名 ${obj3.名}`)
// 总结：setter 就是这样用的。用 = xxx 触发 set 函数
总结
vm = new Vue({data: myData}) ，会让vm成为myData的代理，对myData的所有属性进行监控，防止myData发生变化，vm不知道。只有vm知道了每个变化，才能根据变化跟新视图，实现数据的响应式。
如何给数据新增key
一般对象新增key
使用 Vue.set 或 this.$set
methods: {
setB() {
Vue.set(this.obj, 'b', 1)
// 等价于 this.$set(this.obj, 'b', 1)
}
}
作用
- 新增key
- 自动创建代理和监听
- 触发UI更新（但不会立刻更新）
以后就可以直接用传统方法修改新的变量，就不用重新set
数组对象新增key
使用 Vue 中的变异方法，之所以说是变异方法，指的是在调用这些方法时，Vue自动先执行原本的方法，再帮用户完成自动监听和代理。Vue中数组的编译方法有：
push()pop()shift()unshift()splice()sort()reverse()
下面是变异的大概过程：
class VueArray extends Array{
push(...args){
const oldLength = this.length
super.push(...args)
console.log('你push了')
for(let i = oldLength; i<this.length; i++){
Vue.set(this, i ,this[i])
}
}
}
//这不是Vue的真实实现，只是展示下思路
大概做的事情是新增时，遍历了所有的项，同时加上了代理和监听，还加了一个原型层。
