Vue开发的应用一般为单页面应用,一般情况下只有一个Vue实例,所以实例中的数据可以在当前项目中共享,所以Vue实例中的data是一个对象

Vue组件的出现是为了组件中的视图和数据可以复用(可以简单理解为js中的函数封装),被复用的组件在不同的复用位置可能在操作不同的数据,所以每个组件的data数据必须相互独立,所以组件中的data是一个函数,函数内部返回一个只能让当前组件使用的对象数据

new Vue({
el: ‘#app’,
data: {
message: ‘Love’
},
template: ‘<p>It’s great to love cakes.</p>’
})
// 因为组件是可复用的 Vue 实例
// 定义一个名为 button-counter 的新组件
Vue.component(‘button-counter’, {
data: function () {
return {
count: 0
}
}

 

 

 

JS中的实例是通过构造函数来创建的,每个构造函数可以new出很多个实例,那么每个实例都会继承原型上的方法或属性。vue的data数据其实是vue原型上的属性,数据存在于内存当中。vue为了保证每个实例上的data数据的独立性,规定了必须使用函数,而不是对象。

因为使用对象的话,对象是对于内存地址的引用,直接定义个对象的话组件之间都会使用这个对象,这样会造成组件之间数据相互影响。 这当然就不是我们想要的了。

如果data是函数,每次创建一个新实例后,调用data函数,从而返回初始数据的一个全新副本数据对象

这样每复用一次组件,会返回一份新的data数据,类似于给每个组件实例创建一个私有的数据空间,让各个组件的实例各自独立,互不影响,保持低耦合

使用函数后,使用的是data()函数,data()函数中的this指向的是当前实例本身。
参考文档:
https://zhuanlan.zhihu.com/p/464936600

https://blog.csdn.net/weixin_39550080/article/details/109448313