Vue3之shallowReactive与shallowRef

简介

• 这两个api也是用来定义响应式数据的，但是，他们所定义的数据是浅响应式数据，假如有嵌套的对象，那么嵌套的对象的属性并不是响应式的，只有最外层的属性是响应式的
• shallowReactive：只处理对象最外层属性的响应式（浅响应式）
• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

代码

<script setup>
import { reactive, shallowReactive, ref, shallowRef } from "vue"
const data1 = reactive({ a: 1, b: { c: 2 } })
const data2 = shallowReactive({ a: 1, b: { c: 2 } })
const data3 = ref({ a: 1, b: { c: 2 } })
const data4 = shallowRef({ a: 1, b: { c: 2 } })

const changeData = () => {
    // 分别注释修改
    // data1.a += 1
    // data1.b.c += 1
    // data2.a += 1
    // data2.b.c += 1
    // data3.value.a += 1
    // data3.value.b.c += 1
    // data4.value.a += 1
    data4.value.b.c += 1
}
</script>

<template>
    <section>
        <h2>reactive</h2><span>{{ data1 }}</span>
    </section>
    <section>
        <h2>shallowReactive</h2><span>{{ data2 }}</span>
    </section>
    <section>
        <h2>ref</h2><span>{{ data3 }}</span>
    </section>
    <section>
        <h2>shallowRef</h2><span>{{ data4 }}</span>
    </section>
    <button @click="changeData">修改数据</button>
</template>

• 这个例子在测试的时候需要一个一个的测试修改，不要外层和内层的一起修改，这样你就会发现，浅响应式的内层也可以修改
• 当你修改一个数据，这个数据所在的模板会更新，即使浅响应式的数据改变没有被vue检查到，但是页面刷新了，数据也改变了，读取的是改变后的数据
• 但是视图上浅响应式数据的改变，并不是vue检测到驱动的视图的改变，而是页面更新的改变