vue3的reactive函数实现响应式

reactive使用
1.作用：定义一个对象类型的响应式数据(基本数据类型不能使用它,使用ref)
2.语法：const data = reactive(源对象) 接收一个对象(或者数组),返回一个代理对象(proxy对象)
3.reactive定义的响应式数据是深层次的
4.内部基于es6的proxy实现,通过代理对象操作源对象内部数据进行操作试下响应式

示例1：

<template>
   <h1>{
   
   {data.type}}</h1>
   <p>{
   
   {name}}</p>
   <p>{
   
   {age}}</p>
   <p>{
   
   {data.salary}}</p>
   <p>{
   
   {data.obj.b.testDeep}}</p>
    <ul >
        <li v-for="(item,index) in data.hobby" :key="index">{
   
   {item}}</li>
    </ul>
   <button @click="getInformation">测试深度响应式</button>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
    name: 'app3',
    setup(){
        let name = '小名';
        let age = 25;

        const data = reactive({
            type:'前端工程师',
            salary:'40k',
            hobby:[
            '抽烟',
            '喝酒',
            '打麻将'
            ],
            obj:{
                a:11,
                b:{
                    testDeep:'深度响应式'
                }
            }

        })

        function getInformation(){
            // 直接监听到深层次的变化
            data.obj.b.testDeep = '深度响应式监听';

            // 解决vue2中无法通过下标直接设置数组值得问题
            data.hobby[0] = '约会';
        }

        return {
            name,
            age,
            data,
            getInformation
        }
    }
    
};
</script>

示例2

<template>
    <p>{
   
   {data.name}}</p>
     <p>{
   
   {data.age}}</p>
     <p>{
   
   {data.job}}</p>
     <p>{
   
   {data.hobby}}</p>
     <p v-show="data.sex">{
   
   {data.sex}}</p>
     
    <li>精通：{
   
   {data.jobSkills.master}}</li>
    <li>熟练：{
   
   {data.jobSkills.skilled}}</li>
    <li>了解：{
   
   {data.jobSkills.understand}}</li>
    

     <button @click="editHobby">修改兴趣爱好</button>
     <button @click="addSex">添加性别</button>
     <button @click="delectName">删除名字</button>
     <button @click="deleteHobby">删除兴趣</button>
     <button @click="deletejobSkills">删除技能</button>
</template>

<script>
import {reactive} from 'vue';
export default {
    name: 'DemoVueApp',
    setup(){
        const data = reactive({
            name:'隔壁老王',
            age:24,
            job:'程序员',
            jobSkills:{
              'master':'javascript',
              'skilled':'vue,react',
              'understand':'ts,java'
            },
            hobby:[
                '喜欢敲代码',
                '喜欢写bug',
                '喜欢加班',
                '喜欢996'
            ]
        })
        function editHobby(){
            data.hobby[1] = '擅长改bug'
        }

        function addSex(){
            if(!data.sex)  data.sex = '女' 
            else{
                if(data.sex === '男') data.sex = '女'
                else{data.sex = '男'}
            }
        }

        function delectName(){
            delete data.name
        }

        function deleteHobby(){
            delete data.hobby
        }

        function deletejobSkills(){
            delete data.jobSkills.master
        }
        return {
            data,
            editHobby,
            addSex,
            delectName,
            deleteHobby,
            deletejobSkills
        }
    }
   
};
</script>