vue shallowRef作用及引发问题详解

目录
  • shallowRef是什么
  • 发现问题
  • triggerRefValue与triggerRef
  • 解决问题
  • end

shallowRef是什么

最近在开发遇到一个问题，使用shallowRef居然导致视图更新了，这一看把我也给搞懵了，后来便仔细看了看文档，现在来总结一下。

ref是一个定义响应式的API,可以通过访问.value属性修改并更新到视图上。

但是shallowRef并不会被深层递归成响应式，也就是说使用.value.属性是不会更新到试图上的。只能是替换整个.value才会更新。

那么我们现在遇到的问题是怎么样导致的呢？

发现问题

通过我去注释代码，最后只剩下几行代码，通过一个小例子来看看： 比如：

<script setup>
import {  shallowRef } from 'vue'
let shallowValue = shallowRef({
    age: 10
})
const change = () => {
    shallowValue.value.age= 20;
    console.log(shallowValue.value) // {age:20}
}
</script>
<template>
    <h1>{{ shallowValue }}</h1>
    <button @click="change">change shallowRef</button>
</template>

现在是这样的，当我们点击按钮时，打印出shallowValue的会发现更新啦，但是视图并未更新。

再定义一个ref值。同样在点击按钮触发的函数里面改变ref的值。会发现不仅是ref的值更新啦，shallowRef的值也更新啦。

这是怎么回事呢？

我们在浏览debug一下，发现执行refValue.value触发set函数时同时一会触发triggerRefValue函数。

那triggerRefValue函数又是什么东东？

triggerRefValue与triggerRef

说到triggerRefValue就可以提到triggerRef(), triggerRef()会强制触发依赖于一个shallowRef，同时会更新视图.

<script setup>
import { shallowRef,triggerRef } from 'vue'
let refValue = ref("ref旧值")
let shallowValue = shallowRef({
    age: 10
})
const change = () => {
    shallowValue.value.age= 20;
    triggerRef(shallowValue)
    // refValue.value = 'ref的新值'
    console.log(shallowValue.value)
}
</script>
<template>
    <h1>ref的值：{{refValue}}</h1>
    <h1>{{ shallowValue }}</h1>
    <button @click="change">change shallowRef</button>
</template>

点击按钮时会发现视图同时也会更新。

解决问题

现在我们回到刚才的那个问题，说到triggerRefValue与triggerRef,那他们俩是什么关系呢？ 在触发triggerRefValue下面有段代码。

就是triggerRef函数，而这个函数里面就一行代码，就是triggerRefValue函数，所以说triggerRef的核心功能就是triggerRefValue函数来做的，上面说到triggerRef会强制触发视图更新，就等于是triggerRefValue强制视图更新啦。

以至于在点击按钮时修改ref的值触发了triggerRefValue函数，间接影响到了shallowRef的值，才会使视图更新。

end

事情就是怎么个事情，想要解决这个问题，只能是在开发时避免这个这种写法。

以上就是vue shallowRef作用及引发问题详解的详细内容，更多关于vue shallowRef作用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅拷贝和深拷贝深入理解(shallow copy VS deep copy)

    引言C#中有两种类型变量,一种 是值类型变量,一种是引用类型变量,对于值类型变量,深拷贝和前拷贝都是通过赋值操作符号(=)实现,其效果一致,将对象中的值类型的字段拷贝到新的对象中.这个很容易理解. 本文重点讨论引用类型变量的拷贝机制和实现. C#中引用类型对象的copy操作有两种: •浅拷贝(影子克隆/shallow copy):只复制对象的值类型字段,对象的引用类型,仍属于原来的引用.•深拷贝(深度克隆):不仅复制对象的值类型字段,同时也复制原对象中的对象.就是说完全是新对象产生的. 浅拷贝和

  • 详解Vue3中shallowRef和shallowReactive的使用

    目录 shallowRef 和 shallowReactive 使用 shallowReactive 非深度监听 使用 shallowRef 非深度监听 嗯,怎么说呢,其实这两个函数并不是很常用,在开发过程中基本上用不到,但是呢,我不写我又感觉少点啥,所以说就简单的说一下吧,其实不看也可以哈. shallowRef 和 shallowReactive shallowRef 函数,只处理基本类型数据. shallowReactive 函数,只处理第一层数据. 两个在使用的时候都需要引入才可以. 上

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • Vue3中使用setup通过ref获取子组件的属性

    Vue3中使用setup通过ref获取子组件的属性

    目录 setup通过ref获取子组件的属性 调用子组件的属性和方法 setup通过ref获取子组件的属性 主要依赖defineExpose 子组件通过 defineExpose将数据抛出 <template>   <div class="test-com">testCom</div> </template> <script setup lang="ts"> import { ref } from 'vue'

  • 一文搞懂Vue3中toRef和toRefs函数的使用

    目录 toRef 函数 toRef 函数使用 ref 函数验证 toRefs 函数 toRefs 函数使用 总结 上一篇博文介绍了vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用. toRef 函数 通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢? 首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数

  • vue shallowRef作用及引发问题详解

    vue shallowRef作用及引发问题详解

    目录 shallowRef是什么 发现问题 triggerRefValue与triggerRef 解决问题 end shallowRef是什么 最近在开发遇到一个问题,使用shallowRef居然导致视图更新了,这一看把我也给搞懵了,后来便仔细看了看文档,现在来总结一下. ref是一个定义响应式的API,可以通过访问.value属性修改并更新到视图上. 但是shallowRef并不会被深层递归成响应式,也就是说使用.value.属性是不会更新到试图上的.只能是替换整个.value才会更新. 那么

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • vue的toast弹窗组件实例详解

    相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需 在 <template> 里面写 <toast :show="true" text="弹窗消息

  • vue数据初始化initState的实例详解

    数据初始化 Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState. 首先,来看一下他的代码: function initState(vm) { vm._watchers = []; var opts = vm.$options; if(opts.props) { initProps(vm, opts.props); //初始化props } if(opts.methods) { initMethods(vm, opts.method

  • 基于Vue中使用节流Lodash throttle详解

    在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') c

  • Vue响应式原理的示例详解

    Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v

  • 八个Vue中常用的v指令详解

    八个Vue中常用的v指令详解

    目录 Vue中常用的8种v指令 1 v-text 指令 2 v-html 指令 3 v-on 指令 案例:计数器 4 v-show 指令 5 v-if 指令 6 v-bind 指令 7 v-for 指令 8 v-on 补充 总结 Vue中常用的8种v指令 根据官网的介绍,指令 是带有 v- 前缀的特殊属性.通过指令来操作DOM元素 指令 功能 v-text=“变量/表达式” 文本的设置字符串变量+数字可以直接写是拼接字符串如果出现要使用外部不相同的引号 v-html=“变量” 文本或者页面的设置

  • Vue登录功能的实现流程详解

    Vue登录功能的实现流程详解

    目录 Vue项目中实现登录大致思路 安装插件 创建store 封装axios qs vue 插件 api.js的作用 路由拦截 登录页面实际使用 Vue项目中实现登录大致思路 1.第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2.后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3.前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面 4.前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登

随机推荐