Welchen Sinn haben fest codierte Klasseneigenschaften in der Vue Options API?

Question

Ist es sinnvoll, Eigenschaften wie var_B zu definieren, wenn die Vue Options API verwendet wird? Beim Definieren von Methoden oder innerhalb von Vorlagen-Tags kann nicht auf sie zugegriffen werden. Ich weiß, dass ich für diese Zwecke Variablen in data() definieren kann, aber ich würde gerne wissen, warum Vue dies zulässt und ob es tatsächliche Anwendungsfälle gibt

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

Ich habe versucht, fest codierte Klassenattribute in Vorlagen-Tags und in Methoden zu verwenden, aber keines von beiden hat funktioniert

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 的当前值。