开发者学堂课程【Vue.js 入门与实战：组件-为什么组件的 data 必须是一个 function】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8179
组件-为什么组件的 data 必须是一个 function
通过观察发现，代码中的 date 必须为 fuction 且必须访问一个对象，下面将讲解这样定义的必要性：
一、组件 data 是 function
1. 创一个组件
<script>vue.component(＇counter＇,{template:＇＇}) //这是一个计数器的组件，身上有个按钮，每当点击按钮，让data中的count值+1
2. 定义一个组件
<template id=＂tmpl＂></template>
3. 把 id 给它
<script>vue.component(＇counter＇,{ template:＇#teml＇})
4. 在外面定义结果有代码提示,
<template id=＂tmpl＂> <div><input type=＂button＂value=＂+1＂@click=＂increment＂><h3>{{count}}</h3> </div></template>
5. 定义 count 和 increment 的方法，必须要定义 function，不定义会报错
<script>vue.component(＇counter＇,{ template:＇#teml＇，data:function(){ })
6.在外面定义一个对象
Var dataobj = {count：0}
7.内部 return data
<script>vue.component(＇counter＇,{ template:＇#tmpl＇ data:function(){ return dataobj }, methods:{ increment(){ this.count++ //每当点击按钮就会触发increment，要实现 data 里count值加一 }
6.把 count 以标签形式引入 app 里
<div id=＂app＂> <counter></counter> <hr> <counter></counter> <hr> <counter></counter> <hr></div>
点其中一个其他的也会变化，因为 dataobj 是一个对象，是引入类型的，在页面上放了三个 counter 组件，这三个组件内部返回的对象都指向 count，三个组件共享同一个 data 属性，所以要：
data:function(){ //return dataobj return{ count: 0} },//互不影响
