搜索

首页  >  问答  >  正文

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 天前573

全部回复(1)我来回复

  • P粉875565683

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

    data() 是一个响应式对象。 Vue 正在监视它的更改，并且如果 data() 返回的对象中声明的任何值发生更改，Vue 将更新使用它的所有位置（计算、方法、模板）。

    在 Vue 的基本导出上声明自定义属性（示例中的 var_b）无效。应用程序不会出错，但您在 this.（或模板中）下放置的任何内容均不可用。

    如果您希望在解析组件时读取简单的常量，并且不关心 Vue 观察它的变化，请将其放在