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

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

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

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

• « 上一篇：变量的储存方式
• » 下一篇：TCP协议常见的端口