深入了解Vue3 的 ref 和 reactive

一. ref

1.ref API 如何使用？

ref 的作用就是将一个原始数据类型（primitive data type）转换成一个带有响应式特性的数据类型，原始数据类型共有7个，分别是：String/ Number /BigInt /Boolean /Symbol /Null /Undefined。

ref的值在 JS/TS 中读取和修改时，需要使用 .value获取，在模版中读取是，不需要使用 .value。

<template>
    <h2>Vue3 ref API Base</h2>
    <div>String:{{ refValue }} <span @click="setRefValue">Update</span></div>
    <div>Object:{{ refObj.name }}<span @click="setRefObj">Update</span></div>
</template> 
<script setup>
import { ref } from 'vue'
let refValue = ref('Chris1993');
let setRefValue = () => {
    refValue.value = 'Hello Chris1993';
}
let refObj = ref({ name: 'Chris1993' });
let setRefObj = () => {
    refObj.value.name = 'Hello Chris1993';
} 
</script>

二.reactive

1. reactive API 如何使用？

reactive方法用来创建响应式对象，它接收一个对象/数组参数，返回对象的响应式副本，当该对象的属性值发生变化，会自动更新使用该对象的地方。

<template>
    <h2>Vue3 reactive API Base</h2>
    <div>Object:{{ reactiveObj.name }} <span @click="setReactiveObj">Update</span></div>
    <div>Array:{{ reactiveArr }} <span @click="setReactiveArr">Update</span></div>
</template>
<script setup>
import { reactive } from 'vue'
let reactiveObj = reactive({ name: 'Chris1993' });
let setReactiveObj = () => {
  reactiveObj.name = 'Hello Chris1993';
}
let reactiveArr = reactive(['a', 'b', 'c', 'd']);
let setReactiveArr = () => {
  reactiveArr[1] = 'Hello Chris1993';
}
</script>

2.reactive 可以用在深层对象或数组

reactive是基于ES2015 Proxy API实现的，它的响应式是整个对象的所有嵌套层级。

3.reactive 返回值和源对象不同

4.reactive的属性值可以是 ref值

5.reactive赋值问题

// 方法1
const state = reactive({
    arr: []
});
state.arr = [1, 2, 3]
// 方法2
const arr = reactive([])
arr.push(...[1, 2, 3])