ref

• 逻辑中需要.value访问内部值

• 模板中直接使用

import {ref} from 'vue'

const count = ref(0)
const count1 = ref(0)

function increment (event) {
  console.log(event.target)
  count1.value++   // 逻辑中需要.value访问内部值
}

<button type="button" @click="count++">count is {{ count }}</button>  // 模板中直接使用{{count}}
<button type="button" @click="increment">count1 is {{ count1 }}</button>

reactive

import {reactive} from 'vue'

const user = reactive({
    name: 'jack'
})

console.log(user.name)

ref和reactive的区别

ref和reactive都是vue3创建响应式数据的API，但设计理念和使用场景不同：

• ref主要用于包装原始值（字符串、数字等），而reactive主要用于处理对象和数组
• ref需要通过.value的方式访问内部值，reactive则可以直接访问属性
• 实现原理：ref内部是用reactive包装的{value: xxx}对象，而reactive是用ES6 Proxy代理原始对象
• 模板中，ref自动解包，无需写.value，而reactive保持原样访问