首页 > 其他分享 >vue3——shallowReactive 与 shallowRef

vue3——shallowReactive 与 shallowRef

时间:2022-09-05 10:46:55浏览次数:98  
标签:对象 shallowReactive 数据类型 响应 vue3 shallowRef 属性

  • shallowReactive:只处理对象最外层属性的响应式(浅响应式)。

  • shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。

  • 什么时候使用?

    • 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。

    • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。

代码演示:

shallowReactive

     我们在组件中使用shallowReactive方法定义了一个对象 我们返回对象将对象的属性在模板中使用

第一层才是响应式的 ,深层次的数据将不在具有响应式的功能,数据是改变了的,但是vue监测不到无法触发页面的更新

 

shallowRef:

只处理基本数据类型的响应式, 不进行对象的响应式处理。

可以看出,shallowRef对基本数据类型在页面中可以有响应式功能

 

但如果传递是一个对象,是没有响应式效果的

 

标签:对象,shallowReactive,数据类型,响应,vue3,shallowRef,属性
From: https://www.cnblogs.com/MDRY/p/16657244.html

相关文章

  • vue3——toRef
    一.ref与toRef的区别:ref:复制,修改响应式数据不会影响原始数据toRef引用,修改响应式数据会影响原始数据ref:数据发生改变,界面会自动更新toRef:数据发生改变,界面也不会自......
  • vue3项目-小兔鲜儿笔记-商品详情页01
    1.基础布局完成商品详情基础布局,路由配置,搭好页面架子  2.渲染面包屑编写一个钩子函数useGoods.js,将面包屑获取数据的逻辑抽取出来。//拿到商品信息import{......
  • vue3——hook函数
    什么是hook?——本质是一个函数,把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂......
  • vue3——生命周期
    vue2.x的生命周期:  Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为beforeUnmountdestroyed改名为unmountedVue3.0也提......
  • vue3——watchEffect函数
    watch的套路是:既要指明监视的属性,也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像comp......
  • vue3.0富文本编辑器vue-quill-editor
    1、安装npminstall@vueup/vue-quill@alpha--save2、引入main.js中全局引入import{QuillEditor}from'@vueup/vue-quill'import'@vueup/vue-quill/dist/vue......
  • vue3——计算属性与监视
    一.computed函数与Vue2.x中computed配置功能一致写法: 以上是两种写法:第一种简写形式:如果在显示界面更改了fullname,会有警告:计算属性不能更改,因为简写的形式是只读的......
  • vue3 基础-组件间传值及校验
    本篇讲基于对页面组件化拆分后,组件之间如何进行数据传递,通常是父组件如何给子组件进行传值,子组件接收并进行数据校验后再使用.父子组件传值<!DOCTYPEhtml><html......
  • Element Plus 在 vue3 中使用
    特殊情况下,解决方案:1、el-tree实现收缩的关键字:expanded【组件内部处理的树形数据格式中的关键字】定义树形组件:<el-treeref="treeRef">...</el-tree>获取组件......
  • vue3项目-小兔鲜儿笔记-分类模块01
    1.二级类目-筛选区展示获取数据进行品牌和属性的渲染<template><divclass="sub-filter"v-if="filterData&&!filterDataLoading"><divclass="item"><......