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 观察它的变化，请将其放在

• 首页

• 课程

• 问答

• 我的

• 首页
• 课程
• 文章
• 问答
• 词典
• 手册
• 下载
• 专题

首页

文章

问答

课程

专题

下载

手游

词典

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）