vue组件中的data为什么是函数

组件的本质可以说是一个可复用的vue实例，所以一个组件创建后就可以在各个地方多次复用，但组件中的data数据应该是互不影响的。

<div id="app">
    <!--现在组件复用了三次-->
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
</div>
<template id="cpn">
    <div>
        <h2>{{msg}}</h2>
        <button @click="msg++">增加</button>
    </div>
</template>

Vue.component('cpn',{
        template:cpn,
        //当创建了多个组件实例，每次复用都会返回新的对象，内存地址是不一样的
        data(){
            return {
                msg:0
            }
        }
    })

结果：

msg互不影响
为了实现这一目标，vue利用了js的特性，data数据是以函数返回值的形式来定义，复用一次组件，就会返回一份新的data对象，于是每个组件实例都有了自己的作用域。如果data写成对象形式，因为内存地址是一样的，一个数据变了，其他地方都会变。