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函数
        // 在setup中访问ref定义的基本数据类型的数据，需要 .value才能拿到值
        function sayHi() {
            name.value = '飞蓬'
            age.value = '1000'
            job.value.money = '60K'
        }
        
        return {
            name,
            age,
            job,
            sayHi
        }
    }
}
</script>

reactive函数

1. 作用：定义一个对象类型的响应式数据
2. 语法：const 代理对象 = reactive(源对象) 参数是一个对象或者数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）
3. reactive定义的响应式数据是深层次的
4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据

<template>
    <h1>{{name}}</h1>
    <h1>{{age}}</h1>
    <button @click="sayHi"></button>
</template>
<script>
import {ref, reactive} from 'vue'
exprot default {
    name: 'App',
    setup() {
        const name = ref("景天") 
        const age = ref(18) 
        const job = reactive({
            type: '前端'，
            money：'30K'
        }) 
        const hobby = ['抽烟', '喝酒', '烫头']
        
        function sayHi() {
            name.value = '飞蓬'
            age.value = '1000'
            job.money = '60K'   // 不需要.value了
            hobby[0] = '吃饭'
        }
        
        return {
            name,
            age,
            job,
            hobby,
            sayHi
        }
        
        // ref定义的基本类型的数据都要.value取值，有点烦，我们可以换一种思路，而且语义化
        const person = reactive({
            name: '景天',
            age: 18,
            jon: {
                type: '前端'，
                money：'30K'
            },
            hobby: ['抽烟', '喝酒', '烫头']
        })
        
        return {
            person
        }
    }
}
</script>