VueJS 2.x：非数据绑定变量应声明在何处？

这是个很常见的Vue新手问题，核心要分两种情况来判断：

1. 必须放在data选项里的变量 #

如果你的变量需要参与模板数据绑定（比如在模板里写{{ something }}），或者需要响应式更新（比如变量变化时触发watch、computed更新，或者自动刷新模板），那一定要把它放在data的返回对象中。

比如你示例里的something，如果要在模板中使用，就必须这么写：

export default {
  data () {
    return {
      something: '' // 正确，用于数据绑定/响应式
    }
  }
}

Vue会对data里的属性做响应式处理，当这些变量变化时，相关的视图和逻辑会自动更新，这是Vue核心的响应式机制。

2. 可以放在data外部的变量 #

如果你的变量只是组件内部逻辑使用，不需要绑定到模板，也不需要响应式更新，那完全没必要放在data里——反而会增加不必要的响应式开销（虽然单个变量影响很小，但积少成多）。

针对你示例里的somethingElse：

• 如果它只是临时存储一个计算中间值、或者只在某个方法内部使用，你可以直接在方法里声明局部变量，或者在组件的script块（export default之外）声明：

  // 组件内部私有非全局变量（注意：每个组件的script是独立模块，不会和其他组件共享）
  let somethingElse = '';
  
  export default {
    // ...
    methods: {
      doSomething() {
        somethingElse = '临时值';
        // 更推荐：仅当前方法可用的局部变量
        const tempValue = '仅在这个方法里用';
      }
    }
  }
  

• 如果你希望这个变量属于组件实例（可以在多个钩子/方法中访问），但又不需要响应式，也可以在钩子中挂载到实例上：

  export default {
    created() {
      this.somethingElse = ''; // 属于当前实例，但非响应式
    },
    methods: {
      useIt() {
        console.log(this.somethingElse);
      }
    }
  }
  

避坑提醒 #

• 不要在export default之外声明全局变量（除非你明确要跨组件共享），因为组件的script是模块作用域，这里声明的变量只会在当前组件内有效，不会污染全局。
• 如果把不需要响应式的变量放进data，Vue依然会给它添加响应式监听，虽然不会报错，但会浪费一点点性能，也不符合Vue的设计意图。

内容的提问来源于stack exchange，提问作者now_world