VUE3不用写`ref`语法糖`.value`的方法

推荐一个很好用的配置，可以改变需要写.value的习惯。

在vite.config.ts文件里，加上reactivityTransform: true

plugins: [
      vue({
        reactivityTransform: true
      }),
]

以下这些响应式对象的.value都可以用得上

• ref
• computed
• shallowRef
• customRef
• toRef

对应的使用方法：

• 可以用$()来解构响应式对象，这样就不用写.value
• 可以用$$()来获取原有的响应式对象 举例说明：

import { watchEffect } from 'vue'

// bind ref as a variable
let count = $ref(0)

watchEffect(() => {
  // no need for .value
  console.log(count)
})

// assignments are reactive
count++

// get the actual ref
console.log($$(count)) // { value: 1 }

文章来源：

这里文章只是摘抄的内容，剩下的感兴趣的可以自己看看原文哈

github.com/vuejs/vue-n…

针对vue-cli在vue.config.js的配置方法

要求vue-loader@^17.0.0，目前只对SFCs有效。

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          reactivityTransform: true
        }
      })
  }
}

针对 webpack + vue-loader的配置方法

要求vue-loader@^17.0.0，目前只对SFCs有效。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          reactivityTransform: true
        }
      }
    ]
  }
}

来源

文章只是摘抄部分内容，感兴趣的同学可以自己看看原文哈 github.com/vuejs/rfcs/…