shallowReactive浅层式响应对象

一、

reactive 和ref 都是深层响应式对象: 就是不管对象有多少层,修改此对象任一属性都会响应式处理

shallowReactive 和shallowRef 浅层响应式对象: 只会修改第一层对象,修改此对象第一层属性,视图会有同步变化,非第一层,数值会变,视图不会变。

例如有这样一个对象

java 复制代码
{
id:1,
 name:'张三',
 car:{
     price: 7000,
     color: 'red'
 }
}

vue3中定义shallowReactive 对象后,修改id。视图会同步变化,如果修改的是car.price。视图不会变化,除非先修改car.price 对象,然后再修改id,这时第一层对象触发,会把这个对象更新。具体例子如下:

html 复制代码
<script setup> 
  /**
   * reactive 和ref 都是深层响应式对象: 就是不管对象有多少层,修改此对象任一属性都会响应式处理
   * shallowReactive 和shallowRef 浅层响应式对象:
   * 
   * 
   */
  import {reactive,ref,shallowReactive} from 'vue';

  const state = reactive({
    id:1,
    name:'张三',
    car:{
      price: 7000,
      color: 'red'
    }
  });

  function updateStateId() {
    state.id++;
  };
  function updateStatePrice() {
    state.car.price++;
  };


  const stateRef = ref({
    id:1,
    name:'张三',
    car:{
      price: 7000,
      color: 'red'
    }
  });

  function updateRefStateId() {
    stateRef.value.id++;
  };
  function updateRefStatePrice() {
    //直接改非第一层数据,视图不更新,也就是多层级的数据是非响应式的
    stateRef.value.car.price++;
  };


  const shallowstate = shallowReactive({
    id:1,
    name:'张三',
    car:{
      price: 7000,
      color: 'red'
    }
  });

  function updateIdByShallowReactive() {
    shallowstate.id++;
  };

  function updatePriceByShallowReactive() {
    //直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的
    shallowstate.car.price++;
  };

  function updatePriceAndIdByShallowReactive() {
    //直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的
    shallowstate.car.price++;
    //当修改了第一层数据,也修改其他层数据,此时会将此对象所有的数据都更新视图
    //原理:当改变底层数据会触发该状态的监听器,将此状态所有数据更新到视图中
    shallowstate.id++;
  };

</script>

<template>
 
 <div>
    <p>reactive=={{ state.id }}=={{ state.car }}</p>
    <button @click="updateStateId">更新reactive</button>
    <button @click="updateStatePrice">更新reactiveprice</button>

    <p>ref=={{ stateRef.id }}=={{ stateRef.car }}</p>
    <button @click="updateRefStateId">更新ref</button>
    <button @click="updateRefStatePrice">更新ref price</button>
    <h4>function updatePriceAndIdByShallowReactive() {<br>
    //直接改非第一层数据,视图不会更新,也就是多层级的数据是非响应式的<br>
    shallowstate.car.price++;<br>
    //当修改了第一层数据,也修改其他层数据,此时会将此对象所有的数据都更新视图<br>
    shallowstate.id++;<br>
  };</h4>
    <p>shallowReactive=={{ shallowstate.id }}=={{ shallowstate.car }}</p>
    <button @click="updateIdByShallowReactive">shallowReactive更新id</button>
    <button @click="updatePriceByShallowReactive">shallowReactive更新car.price</button>
    <button @click="updatePriceAndIdByShallowReactive">shallowReactive更新car.price和id</button>

 </div>
</template>

<style scoped>

</style>

点击更新ref对象数据id++ 按钮,id属性加1

点击更新ref对象数据car.price++,car.price属性加1

点击更新reactive对象数据id++按钮,id属性加1

点击更新reactive对象数据car.price++,car.price属性加1

点击更新shallowReactive对象属性id++,id属性加1

点击更新shallowReactive对象属性car.price++,car.price属性加1,视图不更新。还是7000

点击更新shallowReactive对象属性car.price和id++,car.price和id属性都加1,并且shallowReactive视图更新。看到下图id加了1,price 加了2。

相关推荐
神仙别闹11 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry34 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3