VueJS 2.x 我应该在哪里声明数据绑定中不使用的变量?

Question

正如标题所示，我应该在data中声明我所有的变量吗？还是只用于数据绑定的那些？

<script>
var somethingElse = '';    //should this be declared here?
export default {
data () {
return {
something: '',     //this var will be used in data-binding
somethingElse: ''  //or here?
}
}
...

Answer 1

我知道你来自其他库/框架，那里的实例变量和状态存在差异。更改实例变量不会触发重新渲染，但更改状态可能会触发。

在 Vue 中，您不必担心这一点。你可以把所有东西都放在data，而 Vue 只有在你更改了实际使用的任何重要地方(例如模板)的东西时才会重新渲染。

<script>
export default {
data () {
return {
something: '',     
somethingElse: '' // you can declare it here, it's the usual way
}
}
...

另一方面，您可以在外部声明变量，但如果这样做：

<script>
var somethingElse = ''; // this will be a singleton. Generally used for constants
export default {
data () {
return {
something: '',     //this var will be used in data-binding
}
}
...

然后somethingElse将在此组件的所有实例之间共享。对于所有这些实例来说，它将是一个单例值：如果你在一个实例中更改，它将同时对所有实例进行更改。(而且它不会是被动的，这意味着对somethingElse的更改不会在任何地方触发重新渲染。