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

“这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战”

场景

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

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

<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
})
复制代码