这是我参与更文挑战的第5天，活动详情查看： 更文挑战
在这里呢, 我们分成两个内容说 一个是vue2的deflrPrperty和vue3的proxy
vue2 defineProperty
获的值 get
class Vue{
constructor(options){
const {data} = options //解构data
const _data = data; // 保存 data里面的值
//由于 我们并不知道里面的值是多少， 所以必须通过循环的方式 取出里面的值
for (const key in _data) {
//这里的this就相当 我给vm.绑定了a, b, c 这几个属性（之前是没有这几个属性的）
Object.defineProperty(this, key, {
get(){
return _data[key]
},
set(){},
})
}
}
}
let vm = new Vue({
data(){
return {a: 12, b: 89, c: 5}
}
})
console.log(vm.a); // 12
console.log(vm.b); // 89
console.log(vm.c); // 5
而这时 我们就获得了值 但是 我们还不能对数值 进行更改 毕竟你set里面都没有内容啊
更改值 set
set里面需要接收一个参数 newValue 我们继续之前的操作
class Vue{
constructor(options){
const {data} = options //解构data
const _data = data; // 保存 data里面的值
//由于 我们并不知道里面的值是多少， 所以必须通过循环的方式 取出里面的值
for (const key in _data) {
//这里的this就相当 我给vm.绑定了a, b, c 这几个属性（之前是没有这几个属性的）
Object.defineProperty(this, key, {
get(){
return _data[key]
},
//接收新的参数
set(newValue){
_data[key] = newValue
// 通过set里面的值得 改变 而对view组件进行渲染
},
})
}
}
}
let vm = new Vue({
data(){
return {a: 12, b: 89, c: 5}
}
})
console.log(vm.a); // 12
console.log(vm.b); // 89
console.log(vm.c); // 5
vue3 proxy
获取值 get
class Vue{
construct(options){
const {data} = options
const _data = data();
return new Proxy (_data, {
//这里的obj 是和 _data 是一样的
get(obj, name){
return obj[name];
},
})
}
}
let vm = new Vue({
data() {
return {
a: 12,
b: 12,
c: 8
}
},
})
window.vm = vm
console.log(mv.a); //12
console.log(mv.b); //12
console.log(mv.c); //8
console.log(mv.v); // undefined
修改值 set
class Vue{
construct(options){
const {data} = options
const _data = data();
return new Proxy (_data, {
//这里的obj 是和 _data 是一样的
get(obj, name){
return obj[name];
},
set(obj, name, value){
obj[name] = value
}
})
}
}
let vm = new Vue({
data() {
return {
a: 12,
b: 12,
c: 8
}
},
})
window.vm = vm
console.log(mv.a); //12
console.log(mv.b); //12
console.log(mv.c); //8
console.log(mv.v); // undefined
总结
个人感觉 也比较好理解，也比较简单嘛！
