data为什么必须是函数？

来源：2-2 模板语法（1）

斯芬克斯01

2018-10-08

老师让问的？
解释如下：还希望有一段讲解能更清晰理解。

官方解释

data 必须是函数
构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。实际上，如果你这么做：

Vue.component(‘my-component’, {
template: ‘{{ message }}’,
data: {
message: ‘hello’
}
})123456

那么 Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。但理解这种规则为何存在也是很有益处的，所以让我们先作个弊：

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',

  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们却给每个组件实例返回了同一个对象的引用

  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

写回答

1回答

快乐动起来呀

2018-10-09

已采纳

比如有一个组件A，data部分是{a:1,b:2}；然后组件B和组件C分别引用组件A，可以按照class的原型链去理解，A.prototype.data={a:1,b:2}，所以B和C的实例引用的A的实例对data的引用都是{a:1,b:2}，换句话说B中实例改变A的实例就会影响到C实例中A的data值，这显然不对，所以需要是个函数然后返回data就可以了

斯芬克斯01

非常感谢！

2018-10-09

共1条回复

Vue全家桶+SSR+Koa2全栈开发美团网

整合大前端8项技术，全面晋级全栈工程师，毕设/面试作品

2445 学习 · 1638 问题

查看课程

相似问题

data函数问题

回答 1

city.js中state为什么是个函数