当前位置:首页 > javascript > vue > 正文内容

vue3 ref,shallowRef, triggerRef, customRef

hxing6412年前 (2022-09-25)vue1779


ref深层次响应

变成响应式

const name = ref('refName')
name.value = 'newName'

shallowRef浅层次响应

const obj = shallowRef({ name: 'shallowRefName' })
obj.value = { name: 'newName' } // 响应式
obj.value.name = 'newName' // 非响应式,视图不刷新

triggerRef主动触发一次更新

const obj = shallowRef({ name: 'shallowRefName' })
obj.value = { name: 'newName' } // 响应式
obj.value.name = 'newName' // 非响应式,视图不刷新
triggerRef(obj) // 重新触发一次视图刷新


customRef自定义ref

function custom(value) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal) {
        value = newVal
        trigger()
      }
    }
  })
}
// 返回一个ref对象
const name = custom('customRefName')
name.value = 'customNewRefName' // 触发了set方法,视图更新


扫描二维码推送至手机访问。

版权声明:本文由星星博客发布,如需转载请注明出处。

本文链接:http://xingxinghan.cn/?id=401

分享给朋友:

“vue3 ref,shallowRef, triggerRef, customRef” 的相关文章

uniapp uview 3.0官方文档地址

https://vkuviewdoc.fsq.pub/...

vue3 scoped样式穿透

用于修改很多vue常用的组件库,在组件中还是避免不了修改组件库样式以elementui为例:<div class="box">     <el-input class="input"...

vue 路由 vue-router

vue 路由 vue-router

前面的话  在Web开发中,路由是指根据URL分配到对应的处理程序。对于大多数单页面应用,都推荐使用官方支持的vue-router。Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router 安装  在使用vu...

UniApp H5项目指南:处理二维码生成和扫描操作

UniApp H5项目指南:处理二维码生成和扫描操作

在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成,使用了JS文件weapp-qrcode.js进行处理,而二维码扫码则是基于一个第三方组件的方式进行支持的,最后通过统一入...

【Vue】详解Vue组件系统

Vue是一款流行的JavaScript框架,它的组件系统是它最重要的特性之一。Vue组件系统允许开发人员将UI界面划分成独立、可重复使用的组件,从而提高代码的可维护性和可重用性。本文将详细介绍Vue组件系统的各个方面。组件的定义在Vue中,一个组件是由一个Vue实例构成的。组件通常包含一个模板、一个...

【Vue】深入探究Vue生命周期

Vue.js 是一款流行的前端框架,广泛应用于各种 Web 应用开发中。在 Vue.js 中,每个组件都有一个生命周期,它包括一系列钩子函数,用于在特定阶段执行特定的操作。本文将详细介绍 Vue 组件生命周期,并讲述它们的实际应用。生命周期钩子函数Vue 组件的生命周期分成了 8 个不同的阶段,每个...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。