关于Vue 定义data变量在return内外的区别

Question

经常能看到有些Vue的代码, 在Data函数 return 内外都定义了变量，例如下V-charts 的实例代码的this.charSettings和 chartData，这样做的目的是什么呢？写在内外的区别和用途又是什么呀。

<template>
  <ve-line :data="chartData" :settings="chartSettings"></ve-line>
</template>
<script>
export default {
  data () {
    this.chartSettings = {
      scale: [true]
    }
    return {
      chartData: {
        columns: ['date', 'PV', 'Order'],
        rows: [
          { 'date': '1/1', 'PV': 1393, 'Order': 1093 },
          { 'date': '1/2', 'PV': 3530, 'Order': 3230 },
          { 'date': '1/3', 'PV': 2923, 'Order': 2623 },
          { 'date': '1/4', 'PV': 1723, 'Order': 1423 },
          { 'date': '1/5', 'PV': 3792, 'Order': 3492 },
          { 'date': '1/6', 'PV': 4593, 'Order': 4293 }
        ]
      }
    }
  }
}
</script>

Answer 1

你页面上 或者在 methods 里 created里 引用只能引用 data return出的变量 而 return 的上文 是可以写逻辑语句的 你定义变量，定义方法 去运算处理 ，然后再将结果return 出去

Answer 2

1、这种可以理解为全局变量和局部变量的差异性
2、return里面只对当前组件生效，而外面的会影响其他组件，从而造成变量污染