vue3 使用 $ref 辛燥，不是那個$refs
這個當(dāng)前還是實(shí)驗(yàn)性api
主要是解決ref修改值需要.value的問題
配置
vite
// vite.config.js
export default {
plugins: [
vue({
reactivityTransform: true
})
]
}
vue-cli
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => {
return {
...options,
reactivityTransform: true
}
})
}
}
tsconfig.json
{
"compilerOptions": {
// ...
"types": [/* ... */,"vue/ref-macros"],
},
}
使用
對比原本的ref
// ref的定義
const num = ref(1)
// ref的修改
num.value = 11
// $ref的定義
const num = $ref(1)
// $ref的修改
num = 11
更多細(xì)節(jié)看文檔
https://vuejs.org/guide/extras/reactivity-transform.html#explicit-opt-in
