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)
  }
})