一.ref

1. ref 通常用于声明基本数据类型

import { ref } from 'vue'
const name = ref('madongmei')

2. 在setup中访问和修改 需要.value属性

name.value = 'zhangsan'

3. 在template模板中读取数据 没有.value属性

<div>{{ name }}</div>

二.reactive

1. reactive用于声明复杂类型响应式数据 定义一个对象类型的响应式数据(基本类型不要用它，要用ref函数)

import { reactive } from 'vue'
const user = reactive({ name: 'madongmei', age: 18 })

2. reactive 返回的是被包装过的响应式对象, 在setup中访问和修改直接使用属性即可

user.age = 20

3. 声明未定义, 动态添加的属性也会是响应式的

user.height = '180'

4. 在模板中使用属性的形式

<div>{{ user.name }}</div>

三. $ref

• 每个ref对象都要加一个.value会很麻烦, 可以使用语法糖来替换
• 将 ref() 改为 $ref() 即可

let name = $ref('zhangsan')

• 在vite.config.js 中启用语法糖

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