shallowReactive和shallowRef

shallowReactive

shallowReactive监听了第一层属性的值，一旦发生改变，则更新视图；其他层，虽然值发生了改变，但是视图不会进行更新

<template>
  <div class="about">
    <h1>{{ state}}</h1>
    <span @click="change1">按钮1</span>
    <span @click="change2">按钮2</span>
  </div>
</template>
<script lang="ts">
import {shallowReactive} from 'vue'
export default {
    setup() {
        const obj = {
            a: 1,
            first: {
                b: 2,
                second: {
                    c: 3
                }
            }
        }

        const state = shallowReactive(obj)

        function change1() {
            state.a = 7
        }

        function change2() {
            state.first.b = 8
            state.first.second.c = 9
            console.log(state);
        }

        return {state,change1,change2}
    }
}
</script>

shallowRef

创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的

const foo = shallowRef({})
// 改变 ref 的值是响应式的
foo.value = {}
// 但是这个值不会被转换。
isReactive(foo.value) // false