首页 > 其他分享 >Vue3-shallowRef与shallowReactive

Vue3-shallowRef与shallowReactive

时间:2024-06-04 22:30:48浏览次数:31  
标签:顶层 对象 shallowReactive 响应 Vue3 shallowRef 属性

shallowRef

  1. 作用:创建一个响应式数据,但只对顶层属性进行响应式处理。

  2. 用法:

    let myVar = shallowRef(initialValue);
    
  3. 特点:只跟踪引用值的变化,不关心值内部的属性变化。

shallowReactive

  1. 作用:创建一个浅层响应式对象,只会使对象的最顶层属性变成响应式的,对象内部的嵌套属性则不会变成响应式的

  2. 用法:

    const myObj = shallowReactive({ ... });
    
  3. 特点:对象的顶层属性是响应式的,但嵌套对象的属性不是。

总结

通过使用 shallowRef()shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的,对所有深层的对象不会做任何处理,避免了对每一个内部属性做响应式所带来的性能成本,这使得属性的访问变得更快,可提升性能。

标签:顶层,对象,shallowReactive,响应,Vue3,shallowRef,属性
From: https://blog.csdn.net/Ian1025/article/details/139420013

相关文章

  • Vue3-Pinia状态管理器
    Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。如果你熟悉组合式API的话,你可能会认为可以通过一行简单的 exportconststate=reactive({}) 来共享一个全局状态。对于单页应用来说确实可以,但如果应用在服务器端渲染,这可能会使你的应用暴露出一些安全漏洞......
  • Vue3单文件组件实现省市区县三级联动
    Provinces.vue<template>  <divclass="select-container">    <selectv-model="selectedProvince"@change="handleProvinceChange">      <optionvalue=""disabled>请选择省份</opti......
  • Vue3中实现父子组件通信
    Vue3中实现父子组件通信父传子父组件给子组件绑定属性,子组件内部提供props选项接收setup语法糖下局部组件无需注册可以直接使用//父组件中<scriptsetup>importSonComfrom''constmessage=ref('thisisfather')</script><template><SonCom:messgae="mess......
  • vue3 实现自定义指令封装 --- 通俗易懂
    1、局部自定义指令1.1 在<scriptsetup>定义组件内的指令,任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令<template><div><h3>使用自定义指令</h3><div>##########################start局部自定义指令</div><div>我是一个input:......
  • Vue3-组件通信详解
    文章目录组件通信的含义Vue3组件通信和Vue2的区别组件通信的具体实现props(父子组件通信)自定义事件(子传父)mitt(任意组件间通信)v-model$attrs(非props的父子组件通信)r......
  • vue2.0和vue3.0同时使用
    背景:原先电脑上安装了vue2.0和node14.17.6版本,后面新项目使用的是vue3.0和node 16.6.1。通过nvm安装node 16.6.1的时候,不小心把原来的2.0环境给搞坏了。目的:本文将通过文字描述(都是cmd命令,截图感觉没啥意义)的方式,讲述卸载和安装多版本node的vue环境前言:步骤中所有的命令都......
  • vue3中ref绑定自定义组件没有获取到dom?
    问题<template><my-compref="test"/></template><scriptlang="ts"setup>consttest=ref()onMounted(()=>{console.log(test.value)})</script>打印出来的是一个proxy对象解决办法1.如果ref绑定的是一个普通的d......
  • 「AntV」X6 自定义vue节点(vue3)
    官方文档本篇文档只讲解vue3中如何使用,vue2的可以参考下官方文档安装插件@antv/x6-vue-shape添加vue组件既然使用vue节点,那么我们就需要准备一个vue的组件,这个组件就是节点的一些样式,根据你们的ui自行写代码即可<template><div>节点名称</div><div>节点描述</div>......
  • Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架!
    使用Vite快速搭建脚手架命令行选项直接指定项目名称和想要使用的模板,Vite+Vue项目,运行(推荐使用yarn)#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue#yarnyarncreatevite......
  • Vue3简单项目流程分享——工作室主页
    Vue3简单项目流程分享——工作室主页零、写在最前以下是项目相关的一些链接:源代码GitHub仓库(需要魔法上网):仓库网页示例(需要魔法上网):网页示例UI图(来源@设计师杨贺):MasterGo主页补充:由于时间关系,该网页没有适配手机端,最佳展示效果为网页端1440p宽度。如果你想要运行源代码:......