vue对data做了什么
优先声明this.n
image.png
getter setter
let obj1 = {
姓: "迪",
名: "丽热巴",
姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求一：" + obj1.姓名()) // 需求一：迪丽热巴
// 抬杠：obj1.姓名() 可以去到括号吗？
// 不可以，因为姓名时函数
//使用getter
let obj2 = {
姓: "迪",
名: "丽热巴",
get 姓名() {
return this.姓 + this.名
},
age: 18
};
console.log("需求二：" + obj2.姓名) // 需求一：迪丽热巴
// 姓名()是虚拟属性
image.png
可以对姓名进行读写，但是不存在一个叫姓名的属性，读写通过get姓名set姓名完成
不存在n的属性，通过getN，setN模拟对n的读写
Object.defineProperty
用法：声明对象时候用getset
但是声明完后，想在后面添加额外getset就用Object.defineProperty。定义的xxx是不存在的
var _xxx = o
Object.defineProperty(obj3, 'xxx'{//要define哪个对象obj3，
get(){ return _xxx},//不需要getxxx
set(value){ _xxx = value}
})
代理
不在对象上暴露任何你访问的东西
let data3 = proxy({data:{n:0}})//括号里的是匿名对象，无法访问,不给变量名，没法修改
let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象，无法访问
function proxy({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(`需求三：${data3.n}`) // 需求三：0
data3.n = -1
console.log(`需求三：${data3.n}，设置为 -1 失败`) // 需求三：0 设置为 -1 失败
data3.n = 1
console.log(`需求三：${data3.n}，设置为 1 成功`) // 需求三：1 设置为 1 成功
// 杠精你还有话说吗？
// 杠精说有！你看下面代码
// 需求四
let myData = {n:0}
let data4 = proxy({ data:myData }) // 括号里是匿名对象，无法访问
// data3 就是 obj
console.log(`杠精：${data4.n}`) // 杠精：0
myData.n = -1
console.log(`杠精：${data4.n}，设置为 -1 失败了吗！？`) // 杠精：设置为 -1 失败了吗！？
// 我现在改 myData，是不是还能改？！你奈我何
// 算你狠
image.png
image.png
