vue3的ref、reactive的使用

一、介绍

ref和reactive是Vue3中用来实现数据响应式的API，一般情况下，ref推荐定义基本数据类型，reactive推荐定义引用数据类型（对象或数组）

 

二、ref与reactive对比

<template>
  <p>{{ person.name }}</p>
  <p>{{ person.long }}</p>
  
  <p>{{ age }}</p>
  <p>{{ info.address }}</p>
  <span @click="changePerson">点击换人啦</span>
</template>

<script setup>
import { ref, reactive } from 'vue';


let person = reactive({
  name: 'Dog Ming',
  long: 18
});

let age = ref(18); // 基本数据类型

let info = ref({
  address: 'huizhou'
});


const changePerson = () => {
    person.name = 'Along';
    person.long = 10;
    
    age.value = 19;
    info.value.address = 'shenzhen';
}

</script>

比较内容	ref	reactive
是否响应式对象 JavaScript Proxy	是	是
能够创建的数据类型	任何类型	对象或数组
JS中是否需要.value 属性	是	否
html模板template中是否需要.value 属性	否	否
dom的更新	异步	异步
是否深层次响应	默认深层次	默认深层次

• ref用于定义基本类型和引用类型，reactive仅用于定义引用类型。
• reactive只能用于定义引用数据类型的原因在于内部是通过ES6的Proxy实现响应式的，而Proxy不适用于基本数据类型。
• ref定义对象时，底层会通过reactive转换成具有深层次的响应式对象，所以ref本质上是reactive的再封装。
• 在JS代码里使用ref定义的数据时，记得加.value后缀，但是在html中则不需要.value后缀；而reactive在JS或者html中都不需要.value后缀。
• 在定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题