一、Vue中的数据响应式是什么？
响应式顾名思义，会做出相应的反应或者动作。 Vue中的数据响应式也一样，不过其主要是针对 data
Vue的 data 是响应式：
-
const vm = new Vue({data:{ n:0 }}) -
如果修改 vm.n 那么 ui 中的 n 就会响应
-
Vue2 通过 Object.defineProperty（）来实现数据响应式
在此之前可能要了解一点 getter、setter、defineProperty（）的用法 MDN
对数据进行添加新数据和监听变动
let data2 = {}
data2._a= 0 // _n 用来存储 a 的值
Object.defineProperty(data2, 'n', {
get(){
return this._a
},
set(value){
if(value < 0) return
this._a = value
}
})
使用代理
let myData5 = {b:0}
let data5 = proxy({ data:myData5 }) // 括号里是匿名对象，无法访问
function proxy2({data}){
let value = data.b
Object.defineProperty(data, 'b', {
get(){
return value
},
set(newValue){
if(newValue<0)return
value = newValue
}
})
// 就加了上面几句，这几句话会监听 data
const obj = {}
Object.defineProperty(obj, 'n', {
get(){
return data.n
},
set(value){
if(value<0)return//这句话多余了
data.n = value
}
})
return obj // obj 就是代理
}
总结
const vm = new Vue({data:{mydata}})
- vm会成为 mydata 的代理
- 会对mydata的所有属性进行监控
- 监控是为了实时更新渲染render（data）
Vue.set 和 vm.$set
作用：
- 新增key
- 自动创建代理和监听
- 触发ui更新
举例
Vue.set(this.obj, 'a', 2)
