Vue3之响应式数据的定义

例子

这里使用了语法糖<script setup>，如果没有使用的话需要使用setup函数，然后返回我们使用的变量
代码

<script setup>
import {reactive, ref} from "vue"
// 定义基本类型的变量
const count = ref(0)
// 定义引用类型的变量
const person = reactive({name:"zhangsan",age:19})

const addCount = () => count.value++
const addAge = () => person.age++
</script>

<template>
    <h2>count:{{count}}</h2>
    <h2>{{person.name}}的年龄是{{person.age}}</h2>
    <button @click="addCount">count加一</button>
    <button @click="addAge">age加一</button>
</template>

效果

知识点

ref

1. 我们用ref函数来定义一个基本类型的响应式数据const param = ref(initValue)
2. 在js中使用我们需要param.value来获取
3. 在模板中我们直接使用param来获取

reactive

1. 我们用reactive来定义一个对象的响应式，这个响应式是深度递归实现的响应式，所以说他的响应式是深层的
2. 在js还是模板中的使用都是对象的读取语法

区别

1. ref也可以定义引用类型，框架会自动将对象或者数组转化为reactive代理的对象
2. ref内部是通过value属性添加getter和setter来时间对数据的劫持的
3. reactive是通过Proxy来实现对对象内部所有数据的劫持