shallowReactive 与 shallowRef

最新推荐文章于 2024-07-27 14:15:10 发布

马德里甜欣

最新推荐文章于 2024-07-27 14:15:10 发布

阅读量576

点赞数 1

文章标签： vue.js 前端 vue3 typescript

本文链接：https://blog.csdn.net/weixin_51564923/article/details/123016178

版权

Vue shallowReactive shallowRef 响应式数据处理

关键词由CSDN通过智能技术生成

shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)
shallowRef: 只处理了value的响应式, 不进行对象的reactive处理

<template>
  <div>
   <h1>{{m1}}</h1>
   <h1>{{m2}}</h1>
   <h1>{{m3}}</h1>
   <h1>{{m4}}</h1>
   <button @click="updata">更新数据</button>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  shallowReactive,
  shallowRef,
} from "vue";
export default defineComponent({
  name: "App",
/* 
shallowReactive与shallowRef
  shallowReactive: 只处理了对象内最外层属性的响应式(也就是浅响应式)
  shallowRef: 只处理了value的响应式, 不进行对象的reactive处理
总结:
  reactive与ref实现的是深度响应式, 而shallowReactive与shallowRef是浅响应式
  什么时候用浅响应式呢?
    一般情况下使用ref和reactive即可,
    如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive
    如果有一个对象数据, 后面会产生新的对象来替换 ===> shallowRef
*/
  setup() {
    const m1 = reactive({ name: "baby1", hobby: { name1: "吃" } });
    const m2 = ref({ name: "baby2", hobby: { name2: "吃" } });
    const m3 = shallowReactive({ name: "baby3", hobby: { name3: "吃" } });
    const m4 = shallowRef({ name: "baby2", hobby: { name4: "吃" } });
    const updata = ()=>{
      m1.name+="---",
      m1.hobby.name1+="---"
      m2.value.name+="---"
      m2.value.hobby.name2+="---"
      m3.name+="---",
      m3.hobby.name3+="---"
      m4.value.name+="---"
      m4.value.hobby.name4+="---"
    }
    return {
      m1,
      m2,
      m3,
      m4,
      updata
    };
  },
});
</script>