"vue": "^3.2.35" 版本新增macros.d.ts的声明文件
这个声明文件是可以直接进行使用,也就说是宏编译的
解决的问题是:
// 新增之前需要.value
let a = ref<number>(0);
a.value++
// 新增之后
let b = $ref<number>(0);
const values = $computed(() => b * 2);
// 配置方式
找到env.d.ts添加这个 我这个是ts 添加下面这个东西
/// <reference types="vue/macros-global" />
本质上来说这是一个语法糖
ref -> $ref
computed -> $computed
shallowRef -> $shallowRef
customRef -> $customRef
toRef -> $toRef
以前所导入到响应式函数,可以添加$这样,你就可以省略.value
注意点:如果当前$不在setup区域内部,比如在一个函数中,你直接返回是不好用的
例子:
const useMouse = () => {
let x = $ref(0);
let y= $ref(0);
const update = (event:MouseEvent) => {
x = event.pageX;
y = event.pageY;
}
onMounted(()=> window.addEventListener('mousemove',update))
// 这样返回页面不是出现响应式的
return {x,y}
}
改修:
return $$({x,y})
//注意点:$作为函数参数的时候的问题
//例子:
let data = $ref(0);
//这里证明了,你发过来的参数不是一个响应式的
//所以即使你使用watch来观察也是无用的,也无法对页面进行逻辑操作
const watchData = (data: Ref<number>) => {
console.log(isRef(data)) //false
console.log(isReactive(data)) //false
}
onMounted(() => {
watchData(data);
})
改修:
onMounted(() => {
watchData($$(data));
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。