vue：数据响应式

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