vue data为什么是函数？而不是对象

2019年01月07日发布阅读(7704) 作者：Jerman

关于组件

首先了解一下，什么是vue组件?
官方解释：
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>，如下：

// 定义一个名为 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组件就是一个vue实例

JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。

vue的data数据其实是vue原型上的属性，数据存在于内存当中

vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。

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

示例：

// 创建一个简单的构建函数
var MyComponent = function() {
    // ... code here
}
// 原型链对象上设置data数据，为里为Object
MyComponent.prototype.data = {
  name: 'abc',
  age: 20,
}
// 创建两个实例:小明，小红
var xiaoming = new MyComponent()
var xiaohong = new MyComponent()
// 默认状态下小明和小红的年龄一样
console.log(xiaoming.data.age === xiaohong.data.age) // true
// 改变一下小明的年龄
xiaoming.data.age = 30;
// 打印下小红的年龄，发现因为改变了小明的年龄，结果造成小红的年龄也变了
console.log(xiaoming.data.age)// 30
console.log(xiaohong.data.age) // 30

上面原因是因为小明和小红的属性data引用的是同一个内存地址

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

// 创建一个简单的构建函数
var MyComponent = function() {
    // ... code here
    this.data = this.data();
}
// 原型链对象上设置data数据，为里为Object
MyComponent.prototype.data = function(){
    return {
      name: 'abc',
      age: 20,
    }
};
// 创建两个实例:小明，小红
var xiaoming = new MyComponent()
var xiaohong = new MyComponent()
// 默认状态下小明和小红的年龄一样
console.log(xiaoming.data.age === xiaohong.data.age) // true
// 改变一下小明的年龄
xiaoming.data.age = 30;
// 打印下小红的年龄，发现因为必变了小明的年龄，结果造成小红的年龄也变了
console.log(xiaoming.data.age)//30
console.log(xiaohong.data.age) // 20

参考

官网：https://cn.vuejs.org/v2/guide/components.html
原型及原型链：https://www.jianshu.com/p/dee9f8b14771

目录

vue data为什么是函数？而不是对象

关于组件

data为什么是函数不是对象?

参考