ref和reactive

一句总结：Vue 3中的ref和reactive是用于创建响应式数据的两种核心方法，其中ref主要用于创建基本类型数据的响应式引用，而reactive则用于创建对象或数组的响应式代理。简而言之，ref适用于基本类型，reactive适用于复杂类型，两者共同构成了Vue 3中数据驱动视图的核心机制。

vue3响应式数据

使用ref定义基本类型数据

<script lang="ts" setup>
  import { ref } from "vue";
  let name = ref("张三");
  let age = 18;
</script>

哪个数据需要是响应式，就把哪个数据用ref包裹起来

使用ref定义对象类型数据

<script lang="ts" setup name="Person">
  import { ref } from "vue";
  let person = ref({
    name: '张三',
    age: 18
  })
  let games = ref([
    "三角洲行动",
    "1999"
  ])
  console.log(person.value.name); // 张三
  console.log(games.value[0]); // 三角洲行动
</script>

使用ref定义对象类型数据，底层还是用reactive创建

使用ref定义的数据

使用ref定义的数据，需要在参数后面加.value, 模板里面使用不需要，会自动.value

<template>
  <div>
    <span>姓名：{{ name }}</span>
    <span>年龄：{{ age }}</span>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref } from "vue";
  let name = ref("张三");
  let age = 18;
  console.log(name.value);
</script>

使用reactive定义对象类型数据

reactive只能定义对象类型的数据

<script lang="ts" setup name="Person">
  import { reactive } from "vue";
  let person = reactive({
    name: '张三',
    age: 18
  })
</script>

使用reactive定义的数据不需要加.value

ref对比reactive

1. ref创建的变量必须使用.value
2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign）去整体替换
3. 若需要定义一个基本数据类型，必须使用ref