一、 vue3x 数据响应式

注意：setup 函数是Vue3新增的配置项，数据和⽅法都要放到 setup 函数⾥声明

基础类型响应式数据

ref函数 常用于实现基础类型响应式数据，原理是通过 Object.defineProperty() 实现
ref函数 也可用来实现对象/数组类型数据，但是需要通过.value调用不方便，原理是通过 Proxy 实现（不推荐）

1. 引入 ref 函数

import { ref } from "vue"

2. 创建基础类型响应式数据
   在 setup 函数里声明响应式数据，并 return 出去

let str3 = ref("vue 3x");
return {
    str3
};

3. 在模板中使用

<div>{{ str3 }}</div>

4. 修改基础类型响应式数据
   ref函数定义的响应式数据，在组件中需要以.value的方式调用，在模板中不需要使用 .value 的方式

str3.value = "vue 3x 更改后";

对象/数组类型响应式数据

reactive函数 只用于对象/数组类型响应式数据，原理通过 Proxy 实现（不能用于基础类型）
在组件和模板中直接通过名称调用，不需要使用.value的方式调用

1. 引入 reactive 函数

import { reactive } from "vue"

2. 创建对象/数组类型响应式数据
   在 setup 函数里声明响应式数据，并 return 出去

let obj3 = reactive({
    name: "3x3x3x",
    age: "33",
});

return {
    obj3
};

3. 在模板中使用

<div>姓名：{{ obj3.name }}，年龄{{ obj3.age }}</div>

4. 修改对象/数组类型响应式数据

obj3.age = "333";

二、vue3x 方法

1. 创建方法
   在 setup 函数里声明方法，并 return 出去

function change3() {
    str3.value = "vue 3x 更改后";
    obj3.age = "333";
};

return {
    change3
};

2. 在模板中使用

<button @click="change3()">改变 vue3x</button>

三、vue2x，vue3x 响应式数据和方法对比

注意：vue3x环境兼容vue2x环境，所以在vue3中可使用vue2的api和语法

<template>
  <div>
    <h1>vue 2x 数据和方法</h1>
    <button @click="change2()">改变 vue2x</button>
    <div>{{ str2 }}</div>
    <div>姓名：{{ obj2.name }}，年龄{{ obj2.age }}</div>
    <div v-for="(item,index) in arr2" :key="index">{{ item.name }}</div>
  </div>
  <div>
    <h1>vue 3x 数据和方法</h1>
    <button @click="change3()">改变 vue3x</button>
    <div>{{ str3 }}</div>
    <div>姓名：{{ obj3.name }}，年龄{{ obj3.age }}</div>
    <div v-for="(item,index) in arr3" :key="index">{{ item.name }}</div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  data() {
    return {
      str2: "vue 2x",
      obj2: {
        name: "2x2x2x",
        age: "22",
      },
      arr2: [{ name: "熊大2x" }, { name: "熊二2x" }],
    };
  },
  methods: {
    change2() {
      this.str2 = "vue 2x 更改后";
      this.obj2.age = "222";
      this.arr2[0].name = "熊大2x 更改后";
    },
  },
  setup() {
    // 定义数据
    let str3 = ref("vue 3x");
    let obj3 = reactive({
      name: "3x3x3x",
      age: "33",
    });
    let arr3 = reactive([{ name: "熊大3x" }, { name: "熊二3x" }]);

    // 定义方法
    function change3() {
      str3.value = "vue 3x 更改后";
      obj3.age = "333";
      arr3[0].name = "熊大3x 更改后";
    };

    // 必须 return
    return {
      str3,
      obj3,
      arr3,
      change3
    };
  },
};
</script>

<style scoped></style>

四、 vue3 响应式数据在实际开发中

1. 通常声明一个data对象，将所有数据放入data对象，用 reactive函数 将其变成响应式数据
2. 引入toRefs函数，并通过 ...toRefs(data) 方式将data对象return出去（toRefs函数的作用：将某个响应式对象的全部属性提供给外部使⽤）
3. 在模板中直接通过属性名调用，在组件中需要通过data.属性名的方式调用

<template>
    <h1>vue 3x 数据和方法</h1>
    <button @click="change3()">改变 vue3x</button>
    <div>{{ str3 }}</div>
    <div>姓名：{{ obj3.name }}，年龄{{ obj3.age }}</div>
    <div v-for="(item,index) in arr3" :key="index">{{ item.name }}</div>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  setup() {
    // 定义数据
    const data = reactive({
      str3: "vue 3x",
      obj3: {
        name: "3x3x3x",
        age: "33",
      },
      arr3: [{ name: "熊大3x" }, { name: "熊二3x" }]
    });
    // 定义方法
    function change3() {
      data.str3 = "vue 3x 更改后";
      data.obj3.age = "333";
      data.arr3[0].name = "熊大3x 更改后";
    }
    // 必须 return
    return {
      ...toRefs(data),
      change3,
    };
  },
};
</script>

<style scoped></style>