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

待我称王封你为后i 2022-09-03 03:28 16阅读 0赞

### 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>