一、兩者區(qū)別

區(qū)別一：

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

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

區(qū)別二：

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

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

二、props為什么不能修改

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

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

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

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

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
      );
    }
  });
}

需要注意，當從子組件修改的prop屬于基礎類型時會觸發(fā)提示。 這種情況下，你是無法修改父組件的數(shù)據(jù)源的， 因為基礎類型賦值時是值拷貝。 當修改引用類型的屬性時不會觸發(fā)提示，并且會修改父組件數(shù)據(jù)源的數(shù)據(jù)。

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

最新評論