什么是深入响应式原理
● 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
● 这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。
● 每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。
● 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。
一、getter 和 setter
1、{n:0}变成{n:(…)}
一开始是{n:0},传给new Vue之后立马变成{n:(…)}
import Vue from "vue";
Vue.config.productionTip = false;
const myData = {
n: 0
};
console.log(myData); //本节课精髓
const vm = new Vue({
data: myData,
template: `
<div>{{n}}<button @click="add">+10</div>
`,
methods: {
add() {
this.n += 10;
}
}
}).$mount("#app");
setTimeout(() => {
myData.n += 10;
console.log(myData); // 本节课精髓
console.log(vm)
}, 3000);
2、get和set
定义的时候设置getter、setter
2.1 需求一:得到姓名
姓名后面的括号能删掉吗?
不能,因为它是函数
let obj1 = {
姓: "高",
名: "圆圆",
姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求一:" + obj1.姓名());
2.2 需求二:姓名不要括号也能得出值
总结:getter 就是这样用的。不加括号的函数,仅此而已
let obj2 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求二:" + obj2.姓名);
2.3 需求三:姓名可以被写
总结:setter就是这样用的。用 = xxx 触发 set 函数
let obj3 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx) {
this.姓 = xxx[0];
this.名 = xxx.substring(1);
},
age: 18
};
obj3.姓名 = "刘诗诗";
console.log(`需求三:姓${obj3.姓}, 名${obj3.名}`);
console.log(obj3);
二、Object.defineProperty
定义完一个对象之后,想再添加新的get、set,只能通过Object.defineProperty
新定义的get、set属性xxx是不存在的,不能return this.xxx/xxx,会造成死循环,可使用局部变量_xxx
let obj3 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx) {
this.姓 = xxx[0];
this.名 = xxx.substring(1);
},
age: 18
};
var _xxx = 0
Object.defineProperties(obj3, 'xxx',{
get(){
return _xxx
},
set(value){
_xxx = value
}
})
obj3.姓名 = "刘诗诗";
console.log(`需求三:姓${obj3.姓}, 名${obj3.名}`);
console.log(obj3);
三、代理和监听
1、需求一:用Object.defineProperty 定义n
let data1 = {}
Object.defineProperty(data1, 'n',{
value:0
})
console.log(`需求一:${data1.n}`)
2、需求二: n 不能小于0
// 即data2.n = -1 应该无效,但data2.n = 1 有效
let data2 = {}
data2._n = 0 // _n 用来偷偷存储 n 的值
Object.defineProperty(data2, 'n', {
get(){
return this._n
},
set(value){
if(value < 0){
return
}
this._n = value
}
})
console.log(`需求二:${data2.n}`)
data2.n = -1
console.log(`需求二:${data2.n} 设置为 -1 失败`)
data2.n = 1
console.log(`需求二:${data2.n} 设置为 1 成功`)
// 那如果对方直接使用 data2._n 呢?
3、需求三:使用代理
let data3 = proxy({data:{n:0}}) // 括号里是匿名对象,无法访问
function proxy({data}/* 解构赋值*/) {
const obj = {}
// 这里是 'n' 写死了,理论上应该遍历data的所有key,这里做了简化
Object.defineProperty(obj, 'n', {
get(){
return data.n
},
set(value){
if(value<0) {
return
}
data.n = value
}
})
return obj // obj 就是代理
}
// data3 就是 obj
console.log(`需求三:${data3.n}`)
data3.n = -1
console.log(`需求三:${data3.n}, 设置为 -1 失败`)
data3.n = -1
console.log(`需求三:${data3.n}, 设置为 1 失败`)
4、需求四
let myData = {n:0}
let data4 = proxy({data:myData}) // 括号里是匿名对象,无法访问
// data3 就是 obj
console.log(`杠精:${data4.n}`)
myData.n = -1
console.log(`杠精:${data4.n}, 设置为 -1 失败了吗!?`)
// 我现在改 myData,是不是还能改?!
5、需求五:用户擅自改
let myData5 = {n:0}
let data5 = proxy2({ data:myData5}) // 括号里是匿名对象,无法访问
function proxy2({data}/* 解构赋值 */){
// 这里的'n'写死了,天蝎座上应该遍历data的所有key,这里做了简化
// 因为我怕你们看不懂
let value = data.n
delete data.n // 这句话可以不写
Object.defineProperty(data, 'n',{
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 就是代理
}
// data3 就是obj
console.log(`需求五:${data5.n}`)
data5.n = -1
console.log(`需求五:${data5.n}, 设置为 -1 失败`)
data5.n = -1
console.log(`需求五:${data5.n}, 设置为 1 失败`)
// 这代理看着眼熟吗?
// let data5 = proxy2({data:myData5})
// let vm = new Vue({data:{n:0}})