站长资讯网
相对于Vue2的defineProperty实现的数据响应式，Vue3对数据响应的处理分工更加明确，通过组合式api中ref与reactive两个暴露给开发者的函数对数据进行包装，从而实现了数据响应式，那么它们有什么区别？下面我们一起来根据例子来学习！
ref：定义基本数据类型、引用数据类型的响应式。也就是说ref(value)，这个value类型可以是基本数据类型，也可以是引用数据类型，但是在js中使用时必须以属性.value格式使用，在template中可以直接调用数据。
<template> <div> <div><button @click="changeValue">修改</button></div> <div> <p>当前strRef：{{ strRef }}</p> <p>当前objRef：姓名：{{ objRef.name }} 爱好：{{ objRef.hobboy }}</p> <p>当前arrRef：{{ arrRef }}</p> </div> </div> </template> <script> import { defineComponent, ref, shallowRef } from 'vue' export default defineComponent({ setup () { const strRef = ref('sapper');// 基本数据类型 const arrRef = ref([1, 3, 2]);// 数组类型 const objRef = ref({ // 对象类型 name: 'sapper', hobboy: ['吉他', '原神'] }) const changeValue = () => { strRef.value = '工兵'; arrRef.value[1] = 4; objRef.value.hobboy[1] = '滑冰'; } return {strRef,objRef,arrRef,changeValue} } }) </script>
登录后复制
reactive：定义引用类型数据的响应式，不支持基本数据类型，如果需要写基本数据类型只能是放在对象中，也就是说reactive(value)，这个value类型必须是引用类型。【
