Vue3中provide和inject數(shù)據(jù)修改規(guī)則
更新時(shí)間：2025年04月23日 11:22:27 作者：BillKu
在Vue3中,通過(guò)inject接收到的數(shù)據(jù)是否可以直接修改,取決于provide提供的值的類型和響應(yīng)式處理方式,本文給大家介紹Vue3中provide和inject數(shù)據(jù)修改規(guī)則,感興趣的朋友一起看看吧
在 Vue3 中，通過(guò) inject 接收到的數(shù)據(jù)是否可以直接修改，取決于 provide 提供的值的類型和響應(yīng)式處理方式：
1. 若提供的是普通值（非響應(yīng)式數(shù)據(jù)）
// 父組件
provide('staticValue', 123);- 子組件修改行為：直接修改會(huì)觸發(fā)控制臺(tái)警告，且不會(huì)響應(yīng)式更新。
- 結(jié)論：無(wú)法直接修改，或修改無(wú)意義。
2. 若提供的是 ref 或 reactive 創(chuàng)建的響應(yīng)式數(shù)據(jù)
// 父組件
const count = ref(0);
provide('count', count); // 提供 ref
const state = reactive({ value: 42 });
provide('state', state); // 提供 reactive- 子組件修改行為：
- 允許直接修改：響應(yīng)式數(shù)據(jù)是引用傳遞，修改會(huì)同步到父組件。
- 響應(yīng)式生效：父子組件視圖都會(huì)更新。
- 示例代碼：
// 子組件
const count = inject('count');
count.value++; // 修改 ref 的值，父組件同步更新
const state = inject('state');
state.value = 100; // 修改 reactive 屬性，父組件同步更新- 結(jié)論：可以直接修改，且響應(yīng)式生效。
3. 若提供的是 readonly 包裝的響應(yīng)式數(shù)據(jù)
// 父組件
const state = reactive({ value: 42 });
provide('state', readonly(state)); // 提供只讀對(duì)象- 子組件修改行為：直接修改會(huì)觸發(fā)控制臺(tái)警告，且修改無(wú)效。
- 結(jié)論：無(wú)法直接修改。
最佳實(shí)踐建議
- 單向數(shù)據(jù)流優(yōu)先：推薦通過(guò)
provide提供修改方法（如函數(shù)），而非直接暴露數(shù)據(jù)本身。
// 父組件
const count = ref(0);
const updateCount = (newVal) => { count.value = newVal };
provide('count', { value: readonly(count), updateCount });- 明確權(quán)限控制：若需子組件修改數(shù)據(jù)，使用
ref/reactive；若需禁止修改，使用readonly。
總結(jié)表
| provide 數(shù)據(jù)類型 | 是否允許直接修改 | 響應(yīng)式更新生效 |
|---|---|---|
| 普通值（非響應(yīng)式） | ? 否 | ? 否 |
ref / reactive | ? 是 | ? 是 |
readonly(ref/reactive) | ? 否 | ? 否 |
通過(guò)合理選擇數(shù)據(jù)類型和響應(yīng)式 API，可靈活控制子組件對(duì)注入數(shù)據(jù)的操作權(quán)限。
到此這篇關(guān)于Vue3中provide和inject數(shù)據(jù)修改規(guī)則的文章就介紹到這了,更多相關(guān)vue provide和inject內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue項(xiàng)目中使用element-ui的Upload上傳組件的示例
本篇文章主要介紹了在vue項(xiàng)目中使用element-ui的Upload上傳組件的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
react+?ts?vite搭建及二次封裝請(qǐng)求的過(guò)程解析
這篇文章主要介紹了react+?ts?vite搭建及二次封裝請(qǐng)求，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue axios sessionID每次請(qǐng)求都不同的原因以及修改方式
這篇文章主要介紹了vue axios sessionID每次請(qǐng)求都不同的原因以及修改方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
element-plus?el-form表單驗(yàn)證使用方法以及注意事項(xiàng)
這篇文章主要給大家介紹了關(guān)于element-plus?el-form表單驗(yàn)證使用方法以及注意事項(xiàng)的相關(guān)資料,表單驗(yàn)證能通過(guò)設(shè)置驗(yàn)證規(guī)則驗(yàn)證用戶的輸入,并對(duì)不規(guī)范的輸入做出對(duì)應(yīng)提示,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue3中關(guān)于setup與自定義指令，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
自定義指令是用來(lái)操作DOM的。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。這篇文章主要介紹了Vue.js自定義指令的用法與實(shí)例解析，一起看看吧2017-01-01
Vue3之路由的query參數(shù)和params參數(shù)用法
這篇文章主要介紹了Vue3之路由的query參數(shù)和params參數(shù)用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue實(shí)現(xiàn)雙token無(wú)感刷新的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)雙token無(wú)感刷新,雙token機(jī)制,尤其是指在OAuth 2.0授權(quán)協(xié)議中廣泛使用的access token（訪問(wèn)令牌）和refresh token（刷新令牌）組合,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
VUE實(shí)現(xiàn)自動(dòng)滾動(dòng)簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于VUE實(shí)現(xiàn)自動(dòng)滾動(dòng)的相關(guān)資料,現(xiàn)在很多數(shù)據(jù)展示大屏都會(huì)有很多的自動(dòng)滾動(dòng)的列表,文中通過(guò)代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08