搜尋

首頁  >  問答  >  主體

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

使用 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>

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

P粉864594965P粉864594965453 天前574

全部回覆(1)我來回復

  • P粉875565683

    P粉8755656832023-09-09 14:37:12

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

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

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