响应显示语法糖

官网 (opens new window)

在 setup 中定义响应式数据时，使用 ref 时，需要使用 .value 才能获取数据。

安装：

yarn add -D @vitejs/plugin-vue

配置如下：

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}

// env.d.ts
/// <reference types="vue/macros-global" />

配置完成后使用如下：

<script setip lang="ts">
const type = $ref('') // 以前用法 const type = ref('') 
// 特别注意 const 不能赋值，如果要赋值 改为 let
let types = $ref('') // 以前用法 const type = ref('') 
console.log(type) // 以前用法 console.log(type.value)
console.log(types)
</script>