首先看個(gè)例子

new  Vue({
    el: '#app',
    template: `<div>{{demo}}</div>`,
    data: {
        demo: 123
    }
})

在new vue()中，data可以直接是一個(gè)對象，為什么在vue組件中，data必須是一個(gè)函數(shù)呢？
我們大致可以通過js原型鏈來對比下：

var Component = function() {};
Component.prototype.data = {
    demo: 123
}
var component1 = new Component();
var component2 = new Component();
component1.data.demo = 456;
console.log(component2.data.demo); // 456

從上面可以看出，兩個(gè)實(shí)例都引用同一個(gè)對象，其中一個(gè)改變的時(shí)候，另一個(gè)也發(fā)生改變。
每一個(gè)vue組件都是一個(gè)vue實(shí)例，通過new Vue()實(shí)例化，引用同一個(gè)對象，如果data直接是一個(gè)對象的話，那么一旦修改其中一個(gè)組件的數(shù)據(jù)，其他組件相同數(shù)據(jù)就會被改變。
而data是函數(shù)的話，每個(gè)vue組件的data都因?yàn)楹瘮?shù)有了自己的作用域，互不干擾。