Vue3中的ref函数：let 变量名 = ref(基本类型或对象类型)

虽然 ref()接收的数据也可以是对象类型，但最好用来接收基本类型

<template>
  <h1>我是App组件</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作种类：{{job.type}}</h2>
  <h2>工作薪水：{{job.salary}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>

import { ref } from 'vue'
// ref函数生成的是一个RefImpl引用对象;  RefImpl(reference 引用；  implement 实现 )

export default {
  name: 'App',
  setup() {
    /*
     * ref接收的数据可以是：基本类型，也可以是对象类型  
     * ref函数的作用：定义一个响应式的数据
     *
     * 语法: const xxx = ref(initValue)
     *      ·创建一个包含响应式数据的引用对象（reference对象，简称ref对象
     *      ·JS操作数据：xxx.value
     *      ·模板中读取数据：不需要.value，直接<div>{{xxx}}</div>）
     *
     * RefImpl中:
     *    基本数据类型实现双向绑定，是通过Object.defineProperty()的getter setter完成的
     *    对象类型的数据，内部求助了vue3.0中的一个新函数 --- reative函数；
     *        补充：ref在接收对象类型时，从根儿上来讲，是使用了ES6中的proxy方法，
     *             但是在vue3中，没有直接写这段代码，而是把proxy的操作封装到了reactive函数
     *             中，即，reactive这个函数里面写了具体对proxy的实现
    */
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: '前端',
      salary: '30k'
    })

    function changeInfo() {
        name.value = '李四'
        age.value = 48
        console.log(job.value);
        job.value.type = '前端开发大牛'
        job.value.salary = '60k'
    }

    // 返回一个对象（常用）
    return {
      name,
      age,
      job,
      changeInfo
    }
  },
}
</script>