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