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