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
})
複製代碼