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

vue3 ref,shallowRef, triggerRef, customRef

hxing6413年前 (2022-09-25)vue2172


ref深层次响应

变成响应式

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

shallowRef浅层次响应

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

triggerRef主动触发一次更新

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

customRef自定义ref

JavaScript
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” 的相关文章

vue3 插件开发

vue3 插件开发

插件是向vue添加全局功能。你如果是一个对象需要提供install方法,你如果是function就直接当install 方法去使用。写一个loading组件供全局使用:1)目录结构index.ts文件内容:import { createVNode, render,&nb...

vue3 setup方法执行原理

Vue 3中的setup函数是在组件实例创建之前调用的一个特殊函数,它主要用于配置组件的状态和行为。下面是setup函数的执行原理的分析:在组件定义中,通过setup属性指定一个函数,例如:export default {     &nb...

uniapp h5设置代理解决跨域问题

在manifest.json文件中 h5 属性中加入如下代码:"h5": {     "devServer": {       &nbs...

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

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

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

Vue中的父子组件通讯及使用sync同步父子组件数据

在Vue.js中,组件通讯是一个非常重要的主题。特别是在处理父子组件之间的通讯时,我们需要了解不同的方式来传递数据和响应事件。本文将介绍Vue中父子组件通讯的几种方式,并重点讨论使用sync属性来实现父子组件数据的双向绑定。父子组件通讯 在Vue中,父组件可以通过prop向子组件传递数据,而子组件则...

Vue中的防抖节流技术,提升用户交互体验

在Vue开发中,我们经常会遇到需要处理用户频繁操作的场景,例如搜索框输入联想、窗口大小改变等。这时,使用防抖节流技术能够有效地控制事件触发频率,提升用户体验和页面性能。 1. 防抖技术 防抖(Debounce)是指在事件被触发后,等...

发表评论

访客

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