例子
这里使用了语法糖
<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
- 我们用
ref
函数来定义一个基本类型的响应式数据const param = ref(initValue)
- 在js中使用我们需要
param.value
来获取 - 在模板中我们直接使用
param
来获取
reactive
- 我们用
reactive
来定义一个对象的响应式,这个响应式是深度递归实现的响应式,所以说他的响应式是深层的 - 在js还是模板中的使用都是对象的读取语法
区别
ref
也可以定义引用类型,框架会自动将对象或者数组转化为reactive
代理的对象ref
内部是通过value属性添加getter和setter来时间对数据的劫持的reactive
是通过Proxy
来实现对对象内部所有数据的劫持