vue3 使用$ref

vue3 使用 $ref ，不是那个$refs

这个当前还是实验性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

更多细节看文档
https://vuejs.org/guide/extras/reactivity-transform.html#explicit-opt-in