VueJS 2.x应该在哪里声明未用于数据绑定的变量？

Question

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

<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

我了解您来自其他libs/框架，在这些框架中，实例变量和状态存在差异。其中更改实例变量不会触发重新呈现，但更改状态可能会触发。

在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的更改不会触发任何地方的重新呈现。)