使用customRef自定义ref，解决setup中处理异步问题。

setup中不允许使用async、await使用customRef可以让请求到的数据自动获取响应式状态
详见下方demo

<template><div>{{ num }}</div><button @click="change">change</button>
</template><script>
/* customRef用于自定义ref，setup不允许使用async和await */
import { customRef } from 'vue'
function useMyRef(value) {return customRef((track, trigger) => {/* 在此处进行请求，并将请求的数据赋值给value，请求到的数据自动获取响应式状态。需要注意的是不要将请求代码放在get内，负责将会死循环（渲染数据->调用get->发送请求->赋值请求到的数据并保存->更新界面->调用get） *///  this.$axios...return {get() {track() //此数据需要被追踪console.log('get', value)return value},set(newValue) {console.log('set', newValue)value = newValuetrigger() //更新视图},}})
}
export default {name: 'App',setup() {let num = useMyRef(18)function change() {num.value++}return {num,change,}},
}
</script>

使用customRef自定义ref，解决setup中处理异步问题。相关推荐

html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...
使用版本 layui-v2.3.0 修改: 打开layui中table.js源码在 Class.prototype.pullData 这个方法定义内部 //获得数据 Class.prototype. ...
promise 的基本概念和如何解决js中的异步编程问题对 promis 的 then all ctch 的分析和 await async 的理解
* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步指的是被请求者解析:被请求者(该事情的处理者)在处理完事情的时候的 ...
Vue3中自定义ref
文章目录使用ref 使用customRef自定义ref 使用ref main.js import { createApp } from 'vue' import App from './App.vu ...
setup中使用ref
目录一.问题二.解决方法三.总结一.问题 1.在选项式API中可以直接用 this.$refs.xxx来引用template中的DOM元素. 但是在组合式API setup中没有this,该如 ...
Vue3 Composition API（二）——computed、watchEffect、setup中使用ref
一.computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理在前面的Options API中,我们是使用computed选项来完成的: ...
vue3 setup中父组件通过Ref调用子组件的方法
在setup()钩子函数中调用父组件 <template><div>我是父组件<children ref="childrenRef" />&l ...
解决CentOS中无法使用setup命令 -bash:setup: command
1.#安装setuptool # yum -y install setuptool 2.不用多想了,系统服务管理肯定也是没有在里面,我就直接也装上 # yum -y install ntsysv 3. ...
php自定义函数数学计算,ThinkPHP自定义函数解决模板标签加减运算的方法
本文实例讲述了ThinkPHP自定义函数解决模板标签加减运算的方法.分享给大家供大家参考.具体如下: 实际项目中,我们经常需要标签变量加减运算的操作.但是,在ThinkPHP中,并不支持模板变量直接运 ...
python中plot不能显示标签_python 2: 解决python中的plot函数的图例legend不能显示中文问题...
问题: 图像标题.横纵坐标轴的标签都能显示中文名字,但是图例就是不能显示中文,怎么解决呢? 解决: plt.figure() plt.title(u'训练性能', fontproperties=fon ...

使用customRef自定义ref，解决setup中处理异步问题。

使用customRef自定义ref，解决setup中处理异步问题。相关推荐

最新文章

热门文章