一个vue组件的问题

Question

如下图，上下两种写法有什么不同，官网教程的解释是可以为每个组件返回新的 data 对象，我无法理解，外面定义data这不是一样么，可以给解释一下吗？谢谢了

Answer 1

区别在于return 的是引用类型
了解一下什么是 ,基本类型和引用类型.

当你的data定义在外部的时候.

var data = {counter: 0};

此data 为指针. 指向这个对象{counter: 0}.
当所有都引用外部定义的 data,其实都是引用的这个对象.
也就是原文中说的多个组件公用这个data.

Answer 2

上面data指向同一个对象，是同一个counter，三个会同步。下面的是独立的三个counter。你点击试试。手机回答不能测试。