vue3基础-如何定义响应式数据

响应式数据

响应式数据是 Vue 框架中的一个核心特性。它在数据变化时自动更新视图。
开发者不需要手动监听数据变化并更新视图，Vue会帮忙完成这个工作。可以帮助开发者更轻松地管理和更新视图，使得开发过程更加高效。

如何定义响应式数据

在vue3中，创建响应式数据主要使用ref和reactive函数，那么这两个函数该怎么用？又有什么区别呢？

🎞️第2学堂-定义响应式数据视频

在组合式API中创建响应式数据一般使用reactive函数,和ref函数

reactive函数简介

1. reactive函数只对对象类型有效对象、数组和 Map、Set 这样的集合类型
2. 对 string、number 和 boolean 这样的原始类型无效

// 创建响应式数组
const arr = reactive([1, 2, 3]);

// 创建响应式对象
const obj = reactive({
  name: 'John',
  age: 30,
});

// 创建响应式Set
const set = reactive(new Set([1, 2, 3]));

// 创建响应式Map
const map = reactive(new Map([['key1', 'value1'], ['key2', 'value2']]));

// 对创建的响应式数据进行修改
arr.push(4);
obj.age++;
set.add(4);
map.set('key3', 'value3');

错误示例

reactive不能创建基础类型数据

const bool = reactive(false)

const number = reactive(2024)

const msg = reactive('hello world')

ref函数简介

1. 可以使用任何值类型创建响应式数据
2. 将传入参数的值包装为一个带 .value 属性的 ref 对象在模板中会自动解包不需要带上.value

<script>
import {ref} from "vue";

// 对象
const refObj = ref({
  title:"响应式基础",
  content:"reactive和ref"
})

refObj.value.title = "ref介绍"

// 数组
const refArr = ref([1,2,3])
refArr.value[0]++

// 字符串
const refString = ref('hello')
refString.value+='world'

// 数字
const refNumber = ref(2023)
refNumber .value++

// ....Set Map Boolean
</script>

<template>
  <h2>{{ refArr }}</h2>
  <h2>{{ refString }}</h2>
  <h2>{{ refNumber }}</h2>
</template>

什么时候用ref，什么时候用reactive

在项目没有定义规范时，灵活运用即可

// 在使用中

ref({val:1}) 相当于 reactive({value:{val:1} })

ref("hello") 相当于 reactive({value:"hello"}) 

👉我要做作业（ 课堂-第2学堂 响应式基础作业 ）