VIP30/v3_project/12_shallowReactive和shallowRef/App.vue

<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, shallowReactive,ref, shallowRef } from "vue";

export default defineComponent({
  setup() {
    //深度劫持(深监视)  ------深度响应式
    const m1 = reactive({
      name: 'xiaoming',
      firend: {
        name: 'xiaohong'
      }
    })
    //浅度响应式 只处理了对象内最外层的属性响应式
    const m2 = shallowReactive({
      name: 'xiaoming',
      firend: {
        name: 'xiaohong'
      }
    })
    //深度
    const m3 = ref({
      name: 'xiaoming',
      firend: {
        name: 'xiaohong'
      }
    })
    //shallowRef处理了value的响应式 不进行对象的reative处理
    const m4 = shallowRef({
      name: 'xiaoming',
      firend: {
        name: 'xiaohong'
      }
    })
    const update = ()=>{
      //更改m1的数据---reactive
      // m1.name += '='
      // m1.firend.name += '!'
      //更改m2的数据---shallowReactive
      // m2.name += '='
      // m2.firend.name += '!'
      //更改m3的数据---ref
      // m3.value.name += '='
      // m3.value.firend.name += '!'
      //更改m4的数据---shallowRef
      // m4.value.name += '='
      console.log(m3,m4)
    }
    return {
      m1,
      m2,
      m3,
      m4,
      update
    };
  },
});
</script>

<style scoped>
</style>