Vue3之ref与reactive的基本使用

ref可以创建基本类型、对象类型的响应式数据
reactive只可以创建对象类型的响应式数据
接下来让我为大家介绍一下吧！

在Vue3中，我们想让数据变成响应式数据，我们需要借助到ref与reactive

先为大家介绍一下ref如何使用还有什么注意点
我们需要导入ref，利用对象结构的办法

<template>
    <div>sum的值为：{{ sum }}</div>
    <button @click="add">sum+1</button>
    <div>姓名：{{ obj.name }}</div>
    <button @click="changeName">修改姓名为李四</button>
</template>

<script setup lang="ts" name="Person">
import { ref } from 'vue';
// 我们需要用ref()的形式去定义需要响应式的数据
let sum = ref(1)
function add() {
    // 注意点，我们需要用到 sum.value才可以获取到值
    sum.value += 1
}
// 我们也可以用在对象上
const obj = ref({
    name: "张三"
})
function changeName() {
    // 对象我们需要使用到obj.value才可以修改数据
    obj.value.name = "李四"
}
</script>
<style scoped></style>

为大家介绍一下reactive的基本使用与注意事项吧！

<template>
    <div>姓名：{{ obj.name }}</div>
    <button @click="changeName">修改姓名为李四</button>
</template>

<script setup lang="ts" name="Person">
import { reactive } from 'vue';
// 我们也可以用在对象上
const obj = reactive({
    name: "张三"
})
// reactive就不像ref一样，不需要使用到.value
function changeName() {
    // 修改姓名 直接obj.name
    // obj.name = "李四"
    // 我们也可以使用到Object.assign 这是我们想把对象整体改掉时写的
    Object.assign(obj, { name: "李四" })
}
</script>
<style scoped></style>

使用规则：
若需要一个基本类型的响应式数据，必须用ref
若需要一个响应式对象，层级不深，ref、reactive 都可以
若需要一个响应式对象，且层级较深，推荐使用reactive

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！