Vue.js 組件自定義非反應屬性安全名稱

Question

1. 組件實例的自定義屬性的安全命名是什么？
2. 存儲特定於組件但非反應性數據的推薦方法是什么？

一些推理：

在使用 Vue.js 時，有時會遇到需要在組件實例中存儲一些靜態數據的情況。 就我對 Vue 的理解而言，組件實例可以被視為具有一些特殊屬性（this.$data、.$el、.$parent 等）的普通對象。 這告訴我，我可以對對象做任何我想做的事情，只是要注意不要與內部使用的屬性名稱發生沖突。

一個常見的例子是一個 Web 組件元素，它包含一些其他邏輯甚至是影子 DOM（例如用於 WebGl 的 Canvas），並且引用綁定到 Vue 組件，這意味着有一些初始化邏輯和處置邏輯綁定到組件的生命周期。 這里的引用可以是代理對象，不一定是 DOM 元素本身。 我通常將它作為帶有“_”前綴的直接屬性存儲在組件中：

<template>
  <my-custom-canvas @ready="canvasReady">
</template>
<script>
export default {
  methods: {
    canvasReady (canvas) { this._my_custom_canvas = canvas; }
  }
}
</script>

所以廣告1.像這樣污染組件實例是“ok-ish”和“安全”的嗎？ 或者我應該把它放到this.$data中，讓它成為反應數據？ 廣告 2.最終，我找不到任何關於如何在 Vue 中使用非反應性數據的好的指南。 在某些情況下，感覺它應該包含在組件本身中，而不是全局空間之外的某個地方。 此外，這是完全錯誤的還是沒有約定的邊緣情況？ 誰能給我一些論據，為什么我應該避免自定義非反應性屬性？

Answer 1

當我需要存儲非反應性數據時，例如 consts 或 enums，我只是將其放入數據函數之外的數據對象中，並放入創建的生命周期方法中。

當您在數據函數之外的數據上定義變量時，它們不會是反應性的。

例如，這會將其初始化為空值，並在需要時使其在模板中可用，但如果它發生更改，則不會啟動刷新。

<template>
  <my-custom-canvas @ready="canvasReady">
</template>
<script>
export default {
  methods: {
    canvasReady (canvas) { this.data.myCanvas = canvas; }
  },
  created() {
     this.data.myCanvas = null;
  }
}
</script>

如果你不打算在模板中使用它，你可以把它放在組件之外。

<template>
  <my-custom-canvas @ready="canvasReady">
</template>
<script>
const myCanvas = null;
export default {
  methods: {
    canvasReady (canvas) { myCanvas = canvas; }
  },
}
</script>

Answer 2

我不一定稱它為重復，但您可能會發現這個問題的答案是相關的：

如何在 Vue 2 中設置組件非反應性數據？

Vue核心團隊也討論過這個話題：

https://github.com/vuejs/vue/issues/1988

簡短的回答是直接向this添加非反應性數據沒有任何問題。

Vue 為自己的內部屬性使用_和$前綴（請參閱此處https://v2.vuejs.org/v2/api/#data ），因此您可能會發現避免使用這些前綴實際上更安全。 從名稱沖突的角度來看，這與您命名道具、數據屬性等時並沒有什么不同，因為它們也會通過this的屬性暴露出來。 mixin 等的私有屬性有自己的約定，在https://v2.vuejs.org/v2/style-guide/#Private-property-names-essential中進行了概述。 如果沒有別的，我建議閱讀詳細說明部分，因為它進一步討論了 Vue 自己的命名約定。

在一些相關的說明中，如果你使用Object.freeze凍結一個對象，那么 Vue 將不會嘗試使其反應。 這與對象是 HTML 元素的情況並不真正相關，但如果您只是試圖讓大型靜態數據遠離反應系統，那么這可能是一種更簡單的方法。