vue_shallowReactive和shallowRef

创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。

个人理解就是只修改对象的第一层数据,第二层以下的数据不会响应式的修改

官方DEMO

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 改变 state 本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式

<template>
    <h2>shallowReactive和shallowRef</h2>
    <h3>m1{{m1}}</h3>
    <h3>m2{{m2}}</h3>
    <h3>m3{{m3}}</h3>
    <h3>m4{{m4}}</h3>
    <hr>
    <button @click="update">更新数据</button>

</template>

<script lang="ts">
import {
    defineComponent,
    reactive,
    ref,
    shallowReactive,
    shallowRef,
} from 'vue'

export default defineComponent({
    name: 'App',
    setup() {
        // 深度响应式
        const m1 = reactive({
            name: '周杰伦1',
            age: 20,
            car: {
                name: 'bmw',
                color: 'red',
            },
        })
        const m2 = shallowReactive({
            name: '周杰伦2',
            age: 20,
            car: {
                name: 'bmw',
                color: 'red',
            },
        })
        const m3 = ref({
            name: '周杰伦3',
            age: 20,
            car: {
                name: 'bmw',
                color: 'red',
            },
        })
        const m4 = shallowRef({
            name: '周杰伦4',
            age: 20,
            car: {
                name: 'bmw',
                color: 'red',
            },
        })

        const update = () => {
            // m1,m2,m3,m4中的car和name不能一起修改,一起修改的话两个都会变成响应式
            // m1.name += '='
            // m1.car.name += '='
            // m2.name += '='
            m2.car.name += '='
            // m3.value.name += '='
            // m3.value.car.name += '='
            // m4.value.name += '='
            // m4.value.car.name += '='
            // console.log(m3, m4)
        }
        return { m1, m2, m3, m4, update }
    },
})
</script>