使用 Vue Options API 时定义像 var_B 这样的属性有什么意义吗？在定义方法时或在模板标签内，它们是不可访问的。我知道我可以出于这些目的在 data() 中定义变量，但我想知道为什么 Vue 允许这样做，以及是否存在实际用例
1
885<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>
我尝试在模板标记内和方法内使用硬编码的类属性，但两者都不起作用
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
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的当前值。