Vue3 新增和删除属性

Vue3 新增和删除属性

Vue3的响应式实现方式，
1、ref,把值类型的对象变为响应式
2、reactive，把对象类型，数组 变为响应式
把对象配置成响应式的，可以直接修改。兵被vue捕获变更，进而自动刷新界面

<script setup>
import {ref, reactive }from 'vue'

const count = ref(0)

let person = reactive({
  name: '张三',
  age: 18,
  job: {
    type: '程序员',
    salary: '30k'
  }
  hobby:['游泳','跑步','爬山']
})

function changeInfo(){
  person.name = "李四",
  person.age = 20,
  person.job.type = "架构师",
  person.job.salary = '50k',
  person.hobby[0] = '打球'
}

function addSex() {
  person.sex = '男'
}

functon deleteAge(){
  delete person.age
}

</scritp>

Vue2实现响应式的原理

<script>
let person = {
  name:"张三",
  age: 19
}
//模拟Vue2的响应式
let p = {}
Object.defineProperty(p, 'name', {
  configurable:true //可配置才能删除 p的属性
  get(){//读取name时调用
    return person.name
  },
  set(value){//有人修改name时调用
    console.log("有人修改name属性")
    person.name = value
  }
})

Object.defineProperty(p, 'age', {
  get(){//读取age时调用
    return person.age
  },
  set(value){//有人修改age时调用
    console.log("有人修改age属性")//把这句话替换为很复杂的更新界面的逻辑
    person.age= value
  }
})

</script>

Vue3 实现响应式

Proxy 是window上的对象
Proxy (target, Handler, IsRevoked)

<script>
let person = {
  name: '张三',
  age: 19
}

//模拟Vue3中的响应式
//const 代理对象 = new Proxy(原对象，源对象的属性)
cosnt p = new Proxy(person,{
  //有人读取了p的某个属性
  get(target, propName){
    console.log("有人读取了p身上的属性")
    return target[propName]
  },
  //有人修改或新增了p身上的属性
  set(target, propName, value){
     console.log("有人修改了p身上的属性，要更新界面了")
     target[propName] = value
  },
  //删除了p身上的属性
  delete(target, propName) {
    console.log("有人删除了p身上的属性，要更新界面了")
    return delete target[propName] //把真实删除结果返回，true,false
  }
})
//在控制台
p.sex = '男' //直接给person添加属性成功


</script>

vue3 实现响应式的原理

ES6 的新玩意儿
window.Reflect,window.Proxy,二者结合实现响应式
Reflect.get(p,'name')
Reflect.set(p, 'name', '新名字')
Reflect.delectCopy(a, 'age')

通过Object.defineProperty 重复给一个对象新增属性，会导致真个应用崩掉。。。
Object.defineProperty(p, 'sex', {
  get(){return 1}
})
Object.defineProperty(p, 'sex', {
  get(){return 3}
})

而Reflect 不会崩溃，利于框架的封装，否则用Object.defineProperty要不停的try...catch...
Reflect.defineProperty(p, 'sex', {
  get(){ return 2}
})


cosnt p = new Proxy(person,{
  //有人读取了p的某个属性
  get(target, propName){
    console.log("有人读取了p身上的属性")
    return Reflect.get(target, propName)
  },
  //有人修改或新增了p身上的属性
  set(target, propName, value){
     console.log("有人修改了p身上的属性，要更新界面了")
     Reflect.set(target, propName, value)
  },
  //删除了p身上的属性
  delete(target, propName) {
    console.log("有人删除了p身上的属性，要更新界面了")
    return Reflect.deleteProperty(target, propName) //把真实删除结果返回，true,false
  }
})