一、reactive函数定义

定义一个对象类型的响应式数据

<template>
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <div>职位：{{job.type}}</div>
    <div>工龄：{{job.workTime}}</div>
    <button @click='change'>修改</button>
<template>
<script>
    import {reactive} from 'vue'
    export defaut{
        name:'App',
        setup(){
            reactive({
                name:'李四',
                age:20,
                job:{
                    type:'前端工程师',
                    workTime:'3年'
                 }
            })
        function change(){
            name='李六五';
            age='24';
            job.type='测试工程师';
            job.workTime='6年';
        }
        return {
            name,
            age,
            job,
            change
        }
    }
}
</script>

二、总结

reactive函数接收一个对象或数组，基于Proxy代理对象实现响应。

可以实现深层次的数据响应式变化。