En el primero, no puede usar someVariable en su plantilla

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

Disponible en Vue3:

para que funcione, puede agregar una palabra clave de setup en su secuencia de comandos, pero debe ajustar el valor de su variable con ref(...) o reactive(...) si desea que sea reactivo a los cambios Más información

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

Un componente de archivo único típico será así:

 <template> ... </template> <script> ... </script>

1. Si define una variable fuera de la declaración de export , es solo una variable de JavaScript simple que puede usar en cualquier lugar dentro de la etiqueta del script. No está vinculado al componente ni relacionado con Vue de ninguna manera. Ventajas:
   • Su variable existe en todo el alcance del elemento <script> .
   • Puede usarlo dentro de funciones internas que no tienen un enlace a this .
2. Si define una variable dentro de la función de datos, o para decirlo con mayor precisión, define una propiedad para el objeto de datos de la instancia del componente, entonces está vinculado al componente y, por lo tanto, está disponible dentro de las etiquetas <template> . Ventajas:
   • Se puede hacer referencia a la variable desde <template>
   • Puede aprovechar la reactividad de Vue. Puede definir propiedades calculadas en esta variable. Cuando lo usa en la plantilla, el html se actualiza para reflejar cualquier cambio en esta variable.
   • Puede pasarlo como accesorios a componentes secundarios.
   • Puede depurar cosas fácilmente usando Vue devtools, puede ver los cambios en su variable. También puede registrar la variable en la consola como $vm.data.someVarData , es decir, la variable se agrega a la instancia del componente 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>

Como tal, debe evitar definir variables fuera de la exportación, ya que dificultan la comprensión del flujo de su código. Casi siempre hay alguna forma de rediseñar su enfoque para no usar variables fuera de la exportación.

Por ejemplo, en el ejemplo anterior, aún puede usar su variable de datos dentro del gancho mounted y la protección de navegación con algunos cambios:

 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 }); },