快捷導(dǎo)航

vue中data和props的區(qū)別詳解

更新時(shí)間：2024年01月19日 09:56:46 作者：程序員-小許

這篇文章主要介紹了vue中data和props的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)吧

一、兩者區(qū)別

區(qū)別一：

data不需要用戶（開(kāi)發(fā)者）傳值，自身維護(hù)

props需要用戶（開(kāi)發(fā)者）傳值

區(qū)別二：

1、data上的數(shù)據(jù)都是可讀可寫(xiě)的，

2、props上的數(shù)據(jù)只可以讀的，無(wú)法重新賦值

二、props為什么不能修改

因?yàn)閂ue是單向數(shù)據(jù)流，為了保證數(shù)據(jù)的單向流動(dòng)，便于對(duì)數(shù)據(jù)的追蹤，出現(xiàn)了錯(cuò)誤可以更加迅速的定位到錯(cuò)誤發(fā)生的位置。

所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外變更父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
額外的，每次父級(jí)組件發(fā)生變更時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。

三、Vue是如何監(jiān)控props屬性被子組件修改并給出警告的

在組件 initProps 方法的時(shí)候，會(huì)對(duì)props進(jìn)行defineReactive操作，傳入的第四個(gè)參數(shù)是自定義的set函數(shù)，該函數(shù)會(huì)在觸發(fā)props的set方法時(shí)執(zhí)行，當(dāng)props修改了，就會(huì)運(yùn)行這里傳入的第四個(gè)參數(shù)，然后進(jìn)行判斷，如果不是root根組件，并且不是更新子組件，那么說(shuō)明更新的是props，所以會(huì)警告。

if (process.env.NODE_ENV !== 'production') {
  var hyphenatedKey = hyphenate(key);
  if (isReservedAttribute(hyphenatedKey) ||
      config.isReservedAttr(hyphenatedKey)) {
    warn(
      ("\"" + hyphenatedKey + "\" is a reserved attribute and cannot be used as component prop."),
      vm
    );
  }
  defineReactive$$1(props, key, value, function () {
    if (!isRoot && !isUpdatingChildComponent) {
      warn(
        "Avoid mutating a prop directly since the value will be " +
        "overwritten whenever the parent component re-renders. " +
        "Instead, use a data or computed property based on the prop's " +
        "value. Prop being mutated: \"" + key + "\"",
        vm
      );
    }
  });
}

需要注意，當(dāng)從子組件修改的prop屬于基礎(chǔ)類型時(shí)會(huì)觸發(fā)提示。這種情況下，你是無(wú)法修改父組件的數(shù)據(jù)源的，因?yàn)榛A(chǔ)類型賦值時(shí)是值拷貝。當(dāng)修改引用類型的屬性時(shí)不會(huì)觸發(fā)提示，并且會(huì)修改父組件數(shù)據(jù)源的數(shù)據(jù)。

以上就是vue中data和props的區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于vue data和props區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: