vue2页面data中的数据放在return和不放return的区别——页面性能提升

公司项目做地图，20w的点标记，导致页面超级卡，后面发现是因为将地图和地图上所有的东西全部定义在了data的return中，后面改了之后发现页面流畅了很多

<button type="primary" @click="clickA">{{a}}</button>
<button type="primary" @click="clickB">{{b}}</button>
data() {
    this.a = false
    const arr = []
    return {
      b: false,
      
    }
  },
  watch: {
    a(newVal) {
      console.log(newVal)
    },
    b(newVal) {
      console.log(newVal)
    }
  },
methods: {
    clickA() {
      this.a = !this.a
      console.log(this.a)
    },
    clickB() {
      this.b = !this.b
      console.log(this.b)
    },
}

如上代码：

a定义在了data之外,就不是响应式的了，所以第一个button中间显示的a一直都是最开始的初始值false,但是点击的时候是在改变a的值，clickA方法中打出来的a是true/false/true/false,并且使用watch监听不到a的变化

b定义在了data之外,是响应式，第二个button中间显示的b就是true/false/true/false,并且使用watch能监听到b的变化

如果一个变量没有在html显示，而在内部用到，最好定义在return外面