Vue Options API/ 中硬編碼的類別屬性有何意義？

Question

使用 Vue Options API 時定義像 var_B 這樣的屬性有意義嗎？在定義方法時或在模板標籤內，它們是不可存取的。我知道我可以出於這些目的在 data() 中定義變量，但我想知道為什麼 Vue 允許這樣做，以及是否存在實際用例

<script>
export default {
  var_B: 10, // WHY DEFINE PROPERTIES HERE AT ALL?
  data() {
    return {
      var_A: 9, 
    };
  },
  methods: {
    double() {
      this.var_A = this.var_A * var_B;
      // causes 9 x undefined  = NaN
    },
  },
};
</script>

<template lang="">
  <div>Variable A: {{ var_A }}</div> <!-- 9 -->
  <div>Variable B: {{ var_B }}</div> <!-- undefined -->
  <button @click="double">Try to Double var_A</button>
</template>

我嘗試在模板標記內和方法內使用硬編碼的類別屬性，但兩者都不起作用

Answer 1

data() 是一個響應式物件。 Vue 正在監視它的更改，如果data() 傳回的物件中宣告的任何值發生更改，Vue 將更新使用它的所有位置（計算） >、方法、模板）。

在 Vue 的基本匯出上宣告自訂屬性（範例中的 var_b）無效。應用程式不會出錯，但您在 this.（或範本中）下放置的任何內容均不可用。

如果您希望在解析元件時讀取簡單的常數，並且不關心 Vue 觀察它的變化，請將其放在 的根目錄中：

const b = 10
export default {
  data: () => ({
    a: 5
  }),
  computed: {
    c() { return this.a * b }
  }
}

每當您更改 a 時，c 都會自動成為 this.a * b 的目前值。