場(chǎng)景

在項(xiàng)目開(kāi)發(fā)的時(shí)候，前端肯定是先寫靜態(tài)頁(yè)面
在靜態(tài)頁(yè)面寫好之后
然后就可以與后端對(duì)接數(shù)據(jù)了【高興】
但是在對(duì)接接口的時(shí)候
我們會(huì)發(fā)現(xiàn)后端返回來(lái)的字段與前端在頁(yè)面上寫的可能不一致
這個(gè)時(shí)候有意思的事情就發(fā)生了

這種情況數(shù)據(jù)是不會(huì)跟新的

<div>
    {{ objData }}
    <button @click="submitHander">改變數(shù)據(jù)</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>

發(fā)生的現(xiàn)象

 想必各位都發(fā)現(xiàn)， 點(diǎn)擊按鈕的時(shí)候，
 數(shù)據(jù)始終沒(méi)有發(fā)生改變
 為什么數(shù)據(jù)沒(méi)有發(fā)生改變了？
 因?yàn)槲尹c(diǎn)擊的時(shí)候是這樣操作的
 objData={
        name:'林漾1',
        age:31,
        sex:'女nv'	
   }
 我是重新賦值的。如果你賦值是整個(gè)對(duì)象，vue3.0是無(wú)法跟新的
 如何要跟新怎么處理

這樣可以跟新

<template>
	<div>
		{{ objData }}
		<button @click="submitHander">改變數(shù)據(jù)</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>

上面跟新遇見(jiàn)的問(wèn)題

如何有很多值。如果需要我去跟新，
那豈不是我要一個(gè)一個(gè)的去參與賦值，
這樣的話豈不是要把我累死？？？【媽呀！接受不了】
也有辦法去解決：如何處理呢？？
其實(shí)上面reactive的是使用方式都錯(cuò)了。真的錯(cuò)了，我騙你

reactive 如何正確去跟新

<template>
    <div>
        {{ objData.arr }}
        <button @click="submitHander">改變數(shù)據(jù)</button>
    </div>
</template>

<script>
import { reactive } from 'vue'
export default {
    setup () {
        let objData=reactive({
            // reactive下面應(yīng)該放置一個(gè)屬性值
            arr:[
                    {
                        name:'林漾',
                        age:31,
                        sex:'女'
                    }
            ]
        });
        function submitHander(){
            objData.arr=[
                {   name:'余聲聲',
                    age:29,
                    sex:'女'
                }
            ]
        }
        return {
            objData,
            submitHander
        }
    }
}
</script>

reactive 正確使用姿勢(shì)

 reactive函數(shù)傳遞的參數(shù)必須是對(duì)象(json/arr)
 千萬(wàn)不要這樣寫 
 let objData=reactive({ name:'林漾', age:31, sex:'女' })
 這樣寫是非常的不好的。
 
 有的小伙伴可能會(huì)說(shuō)：
 上面reactive函數(shù)傳遞的參數(shù)是對(duì)象呀
 有什么問(wèn)題了？？？
 問(wèn)題是在我們跟新數(shù)據(jù)的時(shí)候一點(diǎn)都不友好
 
 還有就是我們?cè)趯?shí)際開(kāi)發(fā)過(guò)程中可能有好幾處都是響應(yīng)式的數(shù)據(jù)
 這個(gè)時(shí)候我們只需要?jiǎng)?chuàng)建一個(gè)reactive
 就說(shuō)按照下面這樣來(lái)處理
 let objData=reactive({
    // 某一個(gè)區(qū)域使用的數(shù)據(jù)
    oneObj:[
            {
                    name:'林漾',
                    age:31,
                    sex:'女'
            }
    ],
    // 另一個(gè)區(qū)域使用的數(shù)據(jù)
    two:{
            name:'余聲聲',
            age:123
    }
});


不推薦這樣使用
let oneObj=reactive({
        name:'林漾',
        age:31,
        sex:'女'
})

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

作者：明月人倚樓
出處：https://www.cnblogs.com/IwishIcould/

想問(wèn)問(wèn)題，打賞了卑微的博主，求求你備注一下的扣扣或者微信；這樣我好聯(lián)系你；(っ??ω??)っ???！

如果覺(jué)得這篇文章對(duì)你有小小的幫助的話，記得在右下角點(diǎn)個(gè)“推薦”哦，或者關(guān)注博主，在此感謝！

萬(wàn)水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ??ω??)っ???！

想問(wèn)問(wèn)題，打賞了卑微的博主，求求你備注一下的扣扣或者微信；這樣我好聯(lián)系你；(っ??ω??)っ???！

支付寶

微信

本文版權(quán)歸作者所有，歡迎轉(zhuǎn)載，未經(jīng)作者同意須保留此段聲明，在文章頁(yè)面明顯位置給出原文連接
如果文中有什么錯(cuò)誤，歡迎指出。以免更多的人被誤導(dǎo)。

總結(jié)

以上是生活随笔為你收集整理的vue3.0中reactive的正确使用姿势的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。