vue3.0中reactive的正确使用姿势

场景

在项目开发的时候，前端肯定是先写静态页面
在静态页面写好之后
然后就可以与后端对接数据了【高兴】
但是在对接接口的时候
我们会发现后端返回来的字段与前端在页面上写的可能不一致
这个时候有意思的事情就发生了

这种情况数据是不会跟新的

<div>
    {{ objData }}
    <button @click="submitHander">改变数据</button>
</div>

<script>
import { reactive } from 'vue'
export default {
    setup () {
        let objData=reactive({
                name:'林漾',
                age:31,
                sex:'女'
        })
        //这样的方式跟新失败
        function   submitHander(){
            objData={
                name:'林漾1',
                age:31,
                sex:'女nv'
           }
        }
        return {
            objData,
            submitHander
        }
    }
}
</script>

发生的现象

 想必各位都发现， 点击按钮的时候，
 数据始终没有发生改变
 为什么数据没有发生改变了？
 因为我点击的时候是这样操作的
 objData={
        name:'林漾1',
        age:31,
        sex:'女nv'
   }
 我是重新赋值的。如果你赋值是整个对象，vue3.0是无法跟新的
 如何要跟新怎么处理

这样可以跟新

<template>
	<div>
		{{ objData }}
		<button @click="submitHander">改变数据</button>
	</div>
</template>

<script>
import { reactive } from 'vue'
export default {
    setup () {
        let objData=reactive({
            name:'林漾',
            age:31,
            sex:'女'
        })
        function	submitHander(){
            objData.name='林漾1';
            objData.name='31';
            objData.name='女nv';
        }
        return {
            objData,
            submitHander
        }
    }
}
</script>

上面跟新遇见的问题

如何有很多值。如果需要我去跟新，
那岂不是我要一个一个的去参与赋值，
这样的话岂不是要把我累死？？？【妈呀！接受不了】
也有办法去解决：如何处理呢？？
其实上面reactive的是使用方式都错了。真的错了，我骗你

reactive 如何正确去跟新

<template>
    <div>
        {{ objData.arr }}
        <button @click="submitHander">改变数据</button>
    </div>
</template>

<script>
import { reactive } from 'vue'
export default {
    setup () {
        let objData=reactive({
            // reactive下面应该放置一个属性值
            arr:[
                    {
                        name:'林漾',
                        age:31,
                        sex:'女'
                    }
            ]
        });
        function submitHander(){
            objData.arr=[
                {   name:'余声声',
                    age:29,
                    sex:'女'
                }
            ]
        }
        return {
            objData,
            submitHander
        }
    }
}
</script>

reactive 正确使用姿势

 reactive函数传递的参数必须是对象(json/arr)
 千万不要这样写
 let objData=reactive({ name:'林漾', age:31, sex:'女' })
 这样写是非常的不好的。

 有的小伙伴可能会说：
 上面reactive函数传递的参数是对象呀
 有什么问题了？？？
 问题是在我们跟新数据的时候一点都不友好

 还有就是我们在实际开发过程中可能有好几处都是响应式的数据
 这个时候我们只需要创建一个reactive
 就说按照下面这样来处理
 let objData=reactive({
    // 某一个区域使用的数据
    oneObj:[
            {
                    name:'林漾',
                    age:31,
                    sex:'女'
            }
    ],
    // 另一个区域使用的数据
    two:{
            name:'余声声',
            age:123
    }
});

不推荐这样使用
let oneObj=reactive({
        name:'林漾',
        age:31,
        sex:'女'
})

let two=reactive({
        name:'余声声',
        age:123
})