Vue 中声明变量有什么区别？

Question

您能解释一下以不同方式声明变量之间的区别吗？我什么时候应该使用这些声明方式？

<script>
const someVariable = 12345

export default {
  name: 'App',
}
</script>

<script>

export default {
  name: 'App',
  data() {
    return {
      someVariable: 12345
    }
  }
}
</script>

Answer 1

在第一个中，您不能someVariable在模板中使用

<script>
const someVariable = 12345

export default {
  name: 'App',
}
</script>
<template> <p> {{someVariable}} </p> </template> //doesn't work

在 Vue3 中可用：

为了使其工作，您可以setup在脚本中添加一个关键字，但如果您想让它对更改做出反应ref(...)，则必须用or包装您的变量值更多信息reactive(...)

<script setup>
const someVariable = 12345

export default {
  name: 'App',
}
</script>
<template> <p> {{someVariable}} </p> </template> //works (you can see the data)

Answer 2

典型的单文件组件如下所示：

<template>
...
</template>

<script>
...
</script>

1. 如果您在语句外部定义变量export，那么它只是一个普通的 JavaScript 变量，您可以在脚本标记内的任何位置使用。它不绑定到组件，也不以任何方式与 Vue 相关。优点：
   • 您的变量存在于整个<script>元素的范围内。
   • 您可以在没有绑定到 的内部函数中使用它this。
2. 如果您在数据函数内定义变量，或者更准确地说，为组件实例的数据对象定义一个属性，则它会绑定到组件，因此在标签内可用<template>。优点：
   • 该变量可以引用自<template>
   • 您可以利用 Vue 的反应性。您可以在此变量上定义计算属性。当您在模板中使用它时，html 会更新以反映此变量中的任何更改。
   • 您可以将其作为道具传递给子组件。
   • 您可以使用 Vue devtools 轻松调试事物，您可以观察变量的更改。您还可以将变量记录到控制台$vm.data.someVarData，例如，将变量添加到 Vue 组件的实例中。

<template>
    <div>
        <div :class="someVarData"/> <!-- This is Ok -->
        <div :class="someVar"/> <!-- This is not Ok -->
    </div>
<template>
<script>
const someVar = "blah";
export default {
    data() {
        return {
            someVarData: "blahData",
        };
    },
    mounted() {
        const el = document.getElementById('myId');
        el.addEventListener('mouseenter', function () {
            console.log(someVar); // This is Ok
            console.log(this.someVarData); // This is not Ok
        });
    },
    beforeRouteEnter() { // <--- Vue-router's Navigation guard
        console.log(someVar); // This is Ok
        console.log(this.someVarData); // This is not Ok
    },
</script>

因此，您应该避免在导出之外定义变量，因为它们会让您更难理解代码的流程。几乎总是有某种方法可以重新设计您的方法，以不使用导出之外的变量。

例如，在上面的示例中，您仍然可以在钩子mounted和导航防护中使用数据变量，但需要进行一些更改：

    mounted() {
        const el = document.getElementById('myId');
        el.addEventListener('mouseenter', () => {
            console.log(someVar); // This is Ok
            console.log(this.someVarData); // Ok - works because we change the function to arrow function, so it is bound to the instance's `this`
        });
        el.addEventListener('mouseenter', function () {
            console.log(someVar); // This is Ok
            console.log(this.someVarData); // Ok - works because we have manually bound the function to the instance's `this`
        }.bind(this));
    },
    beforeRouteEnter(to, from, next) { // <--- Vue-router's Navigation guard
        console.log(someVar); // This is Ok
        console.log(this.someVarData); // This is not Ok
        next((vm) => {
            console.log(vm.someVarData); // Ok - Navigation guard's next function provides the instance's context as a callback parameter
        });
    },