[JavaScript知识库]vue组件中的data为什么是 函数，而不是对象

new Vue() 和component组件中使用
在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，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
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

data为什么是函数, 不是对象?
这并非是 Vue 自身如此设计，而是跟 JavaScript 特性相关，我们来回顾下 JavaScript 的原型链

var Component = function() {};
Component.prototype.data = {
    message: '10'
}
var component1 = new Component(),
    component2 = new Component();
component1.data.message = '20';
console.log(component2.data.message);  // 20
 
// 上面原因是因为component1和component2的属性data引用的是同一个内存地址

从上面可以了解到，vue组件就是一个vue实例。

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

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

以上两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰。

var Component = function() {
    this.data = this.data()
}
Component.prototype.data = function(){
    return {
        message: '10'
    }
}
var component1 = new Component(),
    component2 = new Component();
component1.data.message = '20';
console.log(component2.data.message);  // 10

为什么使用函数不会有这种问题
使用函数后，使用的是data()函数，data()函数中的this指向的是当前实例本身。

原文

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