2023 该放弃vue3中令人厌烦的.value了

2023-02-02 0 326

vue3展开合作开发也有几段好日子了,辨认出越用越爽,但是对refcomputedshallowRefcustomReftoRef采用的这时候都须要所带.value,这两点就更让人很郁闷了,当中最恼人的是ref即使采用量最低,时常非要就两个文档四处都是.value,但好在他们能积极响应性句法糖化解那个更让人厌倦的难题。

积极响应性句法糖

虽然积极响应性句法糖却是两个在概念性的机能,须要表明迈入就能采用,具体内容结构设计在最后完稿前仍可能将发生改变。

refand积极响应式句法糖

<template>

<button@click=”add”>{{count}}</button>

</template>

<scriptsetup>

letcount=$ref(0);

functionadd(){

count++

console.log(count)//1

}

</script>

他们能直接采用$ref()来代替ref,但这里的$ref()其实是两个编译时的宏命令,并不是真实的,它只是Vue编译器的标记,标识count变量须要是两个积极响应式的变量,能想普通的变量一样赋值、访问,但在编译时都会变成带.valueref变量。

向上方的代码在编译时就会变成这样:

letcount=ref(0);

functionadd(){

count.value++

console.log(count.value)//1

}

每两个会返回ref的积极响应式API都有一个与之对应的,以$为前缀的宏函数,包括以下API:

ref->$ref

computed->$computed

shallowRef->$shallowRef

customRef->$customRef

toRef->$toRef

在启用积极响应性句法糖后,这些宏函数都是默认不须要引入能直接在全局采用的,但如果你想让它更加明显,也能表明的采用它们

import{$ref}fromvue/macros

letcount=$ref(0)

通过$()解构

他们通常会在组合函数内返回多个ref,然后解构得到这些ref,对于这种场景,积极响应性句法糖提供了两个$()宏:

import{useMouse}from@vueuse/core

const{x,y}=$(useMouse())

console.log(x,y)

编译时:

2023 该放弃vue3中令人厌烦的.value了

import{toRef}fromvue

import{useMouse}from@vueuse/core

const__temp=useMouse(),

x=toRef(__temp,x),

y=toRef(__temp,y)

console.log(x.value,y.value)

如果x已经是两个ref那么toRef(__temp,x)则会简单的返回它本身,如果两个被解构的值并不是ref(比如两个函数)也是能正常的采用的,那个值会被包进两个ref,因此所有的代码都能正常的执行。

他们能利用那个特性化解一个pinia更让人厌倦的难题,解构时须要采用storeToRefs来解构,即使如果不采用那个方法会时其失去积极响应性,但要是每次采用时都须要再写一行

import{storeToRefs}frompinia

这太麻烦了,既然直接解构会失去相应性,那他们就在采用的这时候直接所带$(),就能直接解构并且不会失去积极响应性。

import{useUserStore}from”../../stores/user.js”;

let{userInfo,updataUserInfo}=$(useUserStore());

如果你在自己的pinia中采用的是ref则会须要下面介绍的ref则会须要下面介绍的ref则会须要下面介绍的$()来展开返回。

保持函数间传递时的积极响应性

虽然他们采用积极响应性句法糖可依避免.value,但它可能将会在他们的函数间传递时可能将出现积极响应性丢失的情况。

例如:

exportconstuseUserStore=defineStore(user,()=>{

//用户信息

letuserInfo=$ref({});

//更新用户信息

constupdataUserInfo=()=>{

};

return{

userInfo,

updataUserInfo

};

})

他们在编写时它是那个样子,但编译时会变成那个样式:

exportconstuseUserStore=defineStore(user,()=>{

//用户信息

letuserInfo=$ref({});

//更新用户信息

constupdataUserInfo=()=>{

};

return{

userInfo:userInfo.value,

updataUserInfo

};

})

这里的userInfo是以对象的形式被返回也就意味着其失去了积极响应性,要想采用真正的ref,而不是被编译时带.value的变量,能在返回时采用$$()来包装。

return{

userInfo:userInfo,

updataUserInfo

};

他们能看到,$$()的效果就像是两个转义标识:$$()中的积极响应式变量不会追加上.value

TypeScript集成

Vue为这些宏函数都提供了类型声明(全局可用),因此类型推导都会符合预期。它与标准的TypeScript语义没有不兼容之处,因此它的句法能与所有现有的工具兼容。

这也意味着这些宏函数在任何JS/TS文档中都是合法的,不是仅能在VueSFC中采用。

即使这些宏函数都是全局可用的,它们的类型须要被显式地引用(例如,在env.d.ts文档中)ts///<referencetypes=”vue/macros-global”/>

若你是从vue/macros中显式引入宏函数时,则不须要像这样全局声明。

显式启用

重点来了,敲黑板!!!

说了这么多的优点、用法,咱赶紧用上吧,不仅能带来便利还能附带点13属性。

虽然是在实验阶段,所以目前却是默认关闭的,他们须要表明的启用它。此外,以下列出的所有配置都须要vue@^3.2.25

Vite

须要@vitejs/plugin-vue@>=2.0.0

应用于SFCjs(x)/ts(x)文档。在执行转换之前,会对文档展开快速的采用检查,因此不采用宏的文档应该不会有性能损失。

注意reactivityTransform现在是两个插件的顶层选项,而不再是位于script.refSugar之中了,因为它不仅仅只对SFC起效。

//vite.config.js

exportdefault{

plugins:[

vue({

reactivityTransform:true

})

]

}

vue-cli

目前仅对SFC起效

须要vue-loader@>=17.0.0

//vue.config.js

module.exports={

chainWebpack:(config)=>{

config.module

.rule(vue)

.use(vue-loader)

.tap((options)=>{

return{

…options,

reactivityTransform:true

}

})

}

}

仅用webpack+vue-loader

目前仅对SFC起效

须要vue-loader@>=17.0.0

//webpack.config.js

module.exports={

module:{

rules:[

{

test:/.vue$/,

loader:vue-loader,

options:{

reactivityTransform:true

}

}

]

}

}

今日的课程就到这里啦,感谢您的耐心阅读,新的一年平安喜乐。

————————————————

版权声明:本文为CSDN博主「喵十一点半」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_43402051/article/details/128527256

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务