ref()

• 定义响应式数据，多用于定义简单数据类型
• 使用时，需要进行导入
• 但是经过ref()定义后，会把变量包装成一个引用实现(响应式)对象，如果想要使用，需要调用里面的value
• 模板里面使用，不需要.value，直接使用就行了

<template>
  <div class="App">
    <p>年龄是：{
  { age }}</p>
    <button @click="changeAge">年龄+1</button>
  </div>
</template>
​
<script>
import { ref } from 'vue'
​
export default {
  name: 'App',
  setup() {
    let age = ref(24)
    // 可以打印看一下，里面有一个value字段，就包含着值
    console.log(age)
    function changeAge() {
      age.value++
    }
    return {
      age,
      changeAge,
    }
  },
}
</script>

reactive()

• 定义响应式数据，多用于定义复杂数据类型
• 使用时，需要进行导入
• 但是经过reactive()定义后，会把变量包装成一个引用实现(响应式)对象，但是这个使用，不需要调用value

<template>
  <div class="App">
    <p>大家好，我叫{
  { userInfo.uname }}</p>
    <p>今年{
  { userInfo.age }}</p>
    <p>会{
  { userInfo.skill() }}</p>
  </div>
</template>
​
<script>
import { reactive } from 'vue'
​
export default {
  name: 'App',
  setup() {
    let userInfo = reactive({
      uname: '坤坤',
      age: 24,
      skill() {
        return '唱跳'
      },
    })
    // 可以打印看一下，里面就直接包含着值，不需要.value调用了
    console.log(userInfo, userInfo.uname)
    return {
      userInfo,
    }
  },
}
</script>

原文链接：https://blog.csdn.net/qq_52845451/article/details/126671688