vue3.0 reactive ref shallowReactive shallowRef 深度劫持(深度监视) 浅劫持(浅监视)

最新推荐文章于 2024-03-30 07:30:00 发布

前端酱紫

最新推荐文章于 2024-03-30 07:30:00 发布

阅读量173

点赞数

分类专栏： vue3.0 文章标签： vue

本文链接：https://blog.csdn.net/wuj1935/article/details/119412813

版权

vue3.0 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文探讨了Vue3.0中ref和reactive的区别，通过示例展示了深度劫持（深度监视）与浅劫持（浅监视）在响应式数据处理上的差异。在示例中，修改深层属性导致不同响应式对象的行为变化，揭示了ref和reactive在深度和浅层数据监听上的工作原理。

摘要由CSDN通过智能技术生成

vue3.0 reactive ref shallowReactive shallowRef 深度劫持(深度监视) 浅劫持(浅监视)

<template>
    <div>m1:{{ m1 }}</div>
    <div>m2:{{ m2 }}</div>
    <div>m3:{{ m3 }}</div>
    <div>m4:{{ m4 }}</div>
    <button @click="updates">修改数据</button>
</template>

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

export default {
    setup() {
        // 深度劫持(深度监视) ---- 深度响应式
        const m1 = reactive({
            name: '鸣人',
            age: 20,
            car: {
                name: '拖拉机',
                color: 'red'
            }
        })

        // 浅劫持(浅监视) ---- 浅响应式
        const m2 = shallowReactive({
            name: '鸣人',
            age: 20,
            car: {
                name: '拖拉机',
                color: 'red'
            }
        })

        // 深度劫持(深度监视) ---- 深度响应式
        const m3 = ref({
            name: '鸣人',
            age: 20,
            car: {
                name: '拖拉机',
                color: 'red'
            }
        })

        // 浅劫持(浅监视) ---- 浅响应式
        const m4 = shallowRef({
            name: '鸣人',
            age: 20,
            car: {
                name: '拖拉机',
                color: 'red'
            }
        })


        const updates = () => {
            // m1.name += '===m1';
            // m1.car.name += '===m1'

            // m2.name += '===m2'
            // m2.car.name += '===m2'

            // m3.value.name += '==='
            // m3.value.car.name += '==='

            // m4.value.name += '==='
            // m4.value.car.name += '==='
        }

        return { m1, m2, m3, m4, updates }
    }
}
</script>

<style>
</style>