當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

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

發布時間：2023/12/13 综合教程 45 生活家

生活随笔收集整理的這篇文章主要介紹了 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
})

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

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

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

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