Vue3中响应式数据代理原理Proxy

Vue3中使用响应式数据

Vue3使用响应式数据需要通过ref与reactive

<template>
  {{ num }}
  <button @click="Method1">button</button>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    //如果只是const num = 0;num不是响应式的数据，修改这个数据页面不会发生更改
    const num = ref(0);
    const person = {
      name: 'aaa',
      age: 12
    }
    //reactive将person这个对象当成目标对象,user则是代理对象,
    //修改person中的值则需要通过user.name,user.age来响应式修改
    const user = reactive(person)
    function Method1() {
      console.log(num);
      //通过num.value修改这个属性的值
      num.value ++
    }
    return {
      num,
      Method1,
      user
    };
  },
});
</script>

Proxy代理

reactive返回的是一个代理对象，其原理就是Proxy实现

//目标对象
const per = {
  name: 'tyh',
  age: 12
}

//生成代理对象
const user = new Proxy(per, {
  /*
    get 方法通过Reflect反射，从而能够返回目标对象的属性值
    通过user.name就可以访问到per.name
  */
  get(target, prop) {
    return Reflect.get(target, prop)
  },
  /*
    set方法则可以对目标对象（per）的属性值进行修改或者增加新的属性
  */
  set(target, prop, val) {
    return Reflect.set(target, prop, val)
  },
  /*
    deleteProperty方法则删除目标对象上的属性值
  */
  deleteProperty(target, prop) {
    return Reflect.defineProperty(target, prop)
  }
})