前言：Vue3中实现数据响应式，用到的是组合式API中的ref和reactive函数，不同的是ref函数一般定义基本类型数据，而reactive函数用于定义一个对象类型的响应式数据。

一、ref函数

• 作用: 定义一个响应式的数据

• 语法: const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象） ；

  • JS中操作数据： xxx.value，因为ref 接收参数并将其包裹在一个带有 value property 的对象中返回；

  • 模板中读取数据: 不需要.value，直接：<div>{ {xxx}}</div>；

    <template>
      <h2>名称：{
          {name}}</h2>
      <button @click="changeName">修改名称</button>
    </template>
    <script>
    import { ref } from 'vue' // 按需引