Vue3-ref函数和reactive函数

ref函数

1. 作用：定义一个响应式的数据，或者说是生成一个引用实现对象
2. 语法：const xxx = ref(initValue)
   • 创建一个包含响应式数据的引用对象（reference对象）
   • JS中操作数据需要：xxx.value
   • 模板中读取数据：直接使用即可

PS：

1. ref接收的数据可以是基本类型数据，也可以是对象类型
2. 基本类型的数据：响应式是靠Object。defineProperty()的get和set完成的
3. 对象类型的数据：内部使用了reactive函数

<template>
    <h1>{
  {name}}</h1>
    <h1>{
  {age}}</h1>
    <button @click="sayHi"></button>
</template>
<script>
import {ref} from 'vue'
exprot default {
    name: 'App',
    setup() {
        const name = ref("景天") 
        const age = ref(18) 
        const job = ref({
            type: '前端'，
            money：'30K'
        }) // 其实Vue3帮你调用了reactive函数