javascript - 在 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(...) 包装变量值或 reactive(...)如果你想让它响应更改 More info

<script setup>
const someVariable = 12345

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