如何理解vue.js文档中 'data 必须是函数' 的概念

Question

文档链接: https://cn.vuejs.org/v2/guide/components.html#data-必须是函数

运行环境: https://jsfiddle.net/k6fuxkzm/

我的问题是,为什么当

data: function () {
    return data
  }

变为

data: function () {
  return {
    counter: 0
  }
}

每个counter就有它自己内部的状态了..

这里不是很理解,有哪位大牛可以帮解惑一下?

Answer 1

ok, 现在我们知道data是组件的数据, 所以如果我们要让组件的多个实例拥有自己的数据(内部状态), 那么是不是需要每个实例都有自己的数据? 如何做到, 就是data函数返回不同的对象啦.  第一个写法每个实例都返回了相同的变量data, 所以在实例间是共享的