Vue3的其他属性和API函数
2024-09-08 11:08:52
customRef() 自定义Ref函数实现Ref()的相关功能
1 <script>
2 import { ref customRef} from 'vue'
3
4 function myRef(value){
5 return customRef((track,trigger)=>{
6 return {
7 get(){
8 track() // 告诉Vue这个数据是需要追踪变化的
9 return value
10 }
11 set(newValue){
12 value = newValue;
13 trigger(); // 告诉Vue触发界面更新
14 }
15 }
16 })
17
18
19 }
20
21 setup(){
22
23 let age = myRef(18);
24 function myFn(){
25 age.value +=1;
26 }
27 return {age,myFn}
28 }
29 </script>
30 通过customRef() 实现自定义ref()的功能。
由于setup函数只能够是同步的，因此在setup函数中获取数据需要逐步回调。
export default {
name:'App',
setup(){
let state = ref([]);
fetch('../public/data.json')
.then((res)=>{
return res.json()
})
.then((data)=>{
state.value = data;
})
.catch((err)=>{
console.log(err);
})
return {state};
}
}
因此通过自定义ref() 可以实现获取数据的代码分离更好维护的目的。
export default {
name:'App',
// 自定义ref 获取数据
myRef(value){
fetch(value)
.then((res)=>{
return res.json()
})
.then((data)=>{
state.value = data;
trigger() // 获取成功更新UI界面
})
.catch((err)=>{
console.log(err);
})
return customRef((track,trigger)=>{
return {
get(){
track();
return value;
},
ste(newValue){
value = newValue
trigger()
return value
}
}
})
},
setup(){
let state = this.myRef('../public/data.json');
return {state};
}
}
提取界面的DOM元素：
在setup函数中调用生命周期函数，就可以获取通过ref获取界面中DOM结点元素的值。
最新文章
- EF多对多更新报错(TableNoTracking引发的bug)
- Mui沉浸模式以及状态栏颜色改变
- Power BI FAQ
- inline-block 兼容性
- Protobuf - 使用scons编译proto文件
- 详解SESSION与COOKIE的区别
- myeclipse破解
- 关于CGContextSetBlendMode: invalid context 0x0的错误
- HTML中Meta属性http-equiv="X-UA-Compatible"详解
- oracle查看最大长度
- 【转】iOS开发：开发证书知识点总结
- 安卓之cannot convert from Fragment1 to Fragment
- JS数组循环的性能和效率分析（for、while、forEach、map、for of）
- SpringMVC 全局异常处理
- WYSIWYG WebBuilder 所见即所得工具
- JS中多维数组的深拷贝的多种实现方式
- 【UI测试】－－多窗口＆系统资源
- Linux - awk 文本处理工具一
- 用make编译openCV报错：ts_gtest.cpp:(.text._ZN7testing8internal2RED2Ev+0xf): undefined reference to 'regfreeA'
- AngularJS中ng-class使用方法