Vue3中ref和reactive的区别

想要把vue中的数据变成响应式的数据可以有ref和reactive两种方式

1.ref用来定义基本类型数据
2.reactive用来定义对象（或数组）类型数据

ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

原理：
1.ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
2.reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据

• ref定义的数据：操作数据需要.value,读取数据时模板中直接读取 不需要.value
• reactive定义数据时：操作数据与读取数据均不需要.value

reactive使用的方式如下

 setup() {
    let person = reactive({
      name: "张三年",
      age: 18,
      job: {
        type: "前端工程师",
        salary: "20k",
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });
    function changeInfo() {
      //reference引用、implement实现
      person.name = "李斯文";
      person.age = 33;
      person.job.type = "UI设计师";
      person.job.salary = "12k";
      person.hobby[0] = "点烟";
      person.hobby[1] = "倒酒";
    }
    return {
      person,
      changeInfo,
    };
  },