一、ref的定义

创建一个响应式的数据引用对象。数据需要使用xx.value修改，插值中直接通过xx获取。

<template>
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <div>职位：{{job.type}}</div>
    <div>工龄：{{job.workTime}}</div>
    <button>修改信息</button>
</template>
<script>
    export default{
        name:'App',
        setup(){
            let name=ref('张三');
            let age=ref(18);
            let job=ref({
            type:'前端工程师',
            workTime:'2年'
            })
            function changeInfo(){
                name.value='李四'；
                age.value='30';
                job.value.type='UI工程师',
                job.value.workTime='3年'
              }
            ruturn{
                name,
                age,
                job,
                changeInfo
            }
        }
    }
</script>

二、总结

数据的响应式通过ref函数实现，可以接收基本数据类型对象数据类型。

基本数据类型通过RefImpl对象来实现响应式，本质是object.defineProperty数据劫持的getter,setter来是实现数据的响应。

对象数据类型通过Proxy代理对象实现响应式。