帶有對象常量的Vue.js子組件在其父對象呈現時意外更新

Question

我有幾個Vue組件以及一些對象文字作為props傳遞

<child :prop1="{ foo: 'bar' }"></child>

但是，當父組件重新渲染時，如下面的最小代碼和框示例所示， prop1更改（由觀察者檢測到）並導致Child更新。 如果prop是對象引用，則它保持不變。

為什么會發生這種情況，這是否意味着使用對象文字（可能是數組文字）作為道具可能並不“安全”？

https://codesandbox.io/s/vue-template-jj0tb

Answer 1

每次模板運行時，它將在命中該部分時創建一個新對象。 這同樣適用於任何引用類型，因此數組，函數等。

它類似於用JavaScript代碼創建的對象等。 例如

function getObject() {
    return {};
}

console.log(getObject() === getObject()); // false

每次調用getObject ，它將返回一個新對象，並且對象相等性基於引用，而不是對象是否包含相同的值。 這實際上是Vue在檢查道具變更時所做的事情。 請記住，Vue模板已編譯為render函數，而這只是普通的JavaScript。 在該render函數中，任何對象文字都將仍然是對象文字。

在您的示例中，假設模板中沒有其他內容，則父項的render函數將如下所示：

function render(h) {
    return h('child', {
        props: {
            prop1: {foo: 'bar'}
        }
    })
}

因此，每次運行時， prop1都會有一個新對象。

正如您已經提到的，將對象移到data ，然后按名稱引用它可以確保每次都使用同一對象，從而避免了子對象的更新。

是否值得擔心將取決於您的方案的具體情況，但是如果有足夠的子代被更新，這可能會對性能產生影響。 子渲染不需要更新實際的DOM，但是如果任何計算的屬性，監視或模板依賴於該道具，則它們將運行。