使用$ref 宏函数 （获取数据不需要.value）

vue版本 需要3.2.25 及以上（使用新特性，需要开启配置）

• 1.使用vue-cil ，在vue.config.js中设置如下：

module.exports = defineConfig({
  ...
  chainWebpack: config => {
    // 显示的开启Props解构默认值
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          reactivityTransform: true
        }
      })
  },
})

• 2.使用vite，在vite.config.ts中设置如下：

export default defineConfig({
   ...
  plugins: [
    vue({
      reactivityTransform:true
    }),
   vueJsx()],
   ...
})

设置完后就可以直接引用使用了

<script lang="ts" setup>
import { $ref } from "vue/macros"
let name= $ref('')
name = '唐园园'
</script>

解构

• 在之前我们解构一个对象使用toRefs 解构完成之后，在获取值和修改值时需要.value，vue3 提供了 语法糖 $() 解构完之后可以直接赋值

<script setup lang='ts'>
import { reactive, toRefs } from 'vue'
import {$} from 'vue/macros'
const user= reactive({
    name: '唐园'
})
 
let { name } = $(user);
name = '汤圆'
</script>