vue3-shallowReactive和shallowRef

136 阅读1分钟

一、shallowReactive

shallowReactive与reactive具有相同功能,区别在于shallowReactive只能响应浅层数据

<script>
    import {shallowReactive} from 'vue'
    export default {
        setup(){
            let preson=showllowReactive({
                name:'张三',
                age:18,
                job:{
                    teacher:{
                        salary:1
                    }
                }
            })
            return {
                person
            }
        }
    }
</script>

person的name和age可以做到响应式的变更数据,而job中teacher的salary数据无法进行响应式的检测。

二、shallowRef

shallowRef与ref具有相同功能,区别在于shallowRef无法对对象类型数据进行响应,对象类型的数据值为obj类型,而不是proxy类型。

<template>
    <button @click='x={y==288}'>点击替换</button>
</template>
<script>
    import {shallowRef} from 'vue'
    export default {
        setup(){
            let x=shallowRef({
            y:0
            })
            return {
              x
            }
        }
    }
</script>

x的y值无法响应式改变,可以对x的y值进行替换