组合API ref函数

ref函数，常用于简单数据类型定义为响应式数据

        在修改值。获取值的时候，需要.value

        在模板中使用ref申明的响应式数据，可以省略.value

<template>
  <div>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <button @click="updateName">修改</button>
  </div>
</template>

<script>
import { reactive, ref, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {
    // name数据
    const name = ref('sl')
    const age = ref(11)
    console.log(name);
    const updateName = () => {
      name.value = 'zs'
    }
    // ref常用于定义简单数据类型的响应式数据
    // 其实也可以定义复杂数据类型的响应式数据
    const data = ref(null)
    return { name, age, updateName }
  }
}
</script>

<style>
</style>

当你明确知道需要的是一个响应式数据对象 那么就用reactive即可

其他情况使用ref