vue实例中data函数里 this.examlpe 的数据和 return里的数据 有区别吗？

Question

vue实例中data函数里 this.examlpe 的数据和 return里的数据 有区别吗？
以下data(){}中在this上属性和 return 一个数据 有和不同？

{
//...
 data () {
    this.visible1 = null
    return {
      visible2: false,
      //...
    }
  },
}

Answer 1

相同点：
都是vue 实例上的对象属性，都可以通过 this.visible1 或者 this.visible2 访问。
不同点：
this.visible2 也可以通过 this.$data.visible2 访问。
实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.visible2 等价于访问 vm.$data.visible2 具体可以看这里

data 声明为返回一个初始数据对象的函数，就不会被所有的实例将共享引用，所以每个组件中的数据，一般通过 visible2 这样定义。

Answer 2

没有，都是指向当前vue实例

Answer 3

data(){
    return{
        test:123
    }
}

是将vue实例的数据以函数返回的形式来定义,防止组件间数据之间的互相影响。
官方解释：

当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。

在其他地方通过this.test来访问该组件所定义的数据test，其中this指向vue实例，后面就是定义的数据。

Answer 4

说过更通俗的把，如果你通过在data里直接this.xxx定义，而不在return里定义的话，你在methods中修改这个值不会触发视图更新。视图只会取到初始值。除非使用vue.set

Answer 5

一楼说很清楚了