为什么Vue组件中data选项是一个函数

一个项目之中会有很多个组件，那就对应着有多个vm实例，组件中的data定义为函数就是为了防止数据污染，多个组件避免公用一个data，初始化data时利用工厂函数返回一个全新的对象，下面通过代码分析一下：

function Vue(){}
Vue.prototype.$options.data = {}

//如果实例对象的data值为对象时

//实例化两个Vue实例对象
const vm1 = new Vue()
const vm2 = new Vue()
vm1.$options.data.name = '张三'
//vm1的data.name值
console.log(vm1.$options.data.name) //张三

vm2.$options.data.name = '李四'
//修改vm2data.name值之后vm1的data.name值
console.log(vm1.$options.data.name) //李四

可见vm1和vm2中如果有相同的属性，他们之间的值是互相影响的

把data定义为函数

function Vue(){}
Vue.prototype.$options = {
    data:() => ({})
}

//实例化两个Vue实例对象
const vm1 = new Vue()
const vm2 = new Vue()

let vm1Data = vm1.$options.data()
vm1Data.name = '张三'
//vm1的data.name值
console.log(vm1Data.name) //张三

let vm2Data = vm2.$options.data()
//修改vm2data.name值之后vm1的data.name值
vm2Data.name = '李四'
console.log(vm1Data.name) //张三

用工厂函数返回一个全新的data对象就可以避免共有一个data对象了,等同于每次都重新new一个data对象。