Vue中组件的data选项

一个组件的 data 选项必须是一个函数

data: function () {
  return {
    count: 0
  }
}

如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。这都是因为js的特性带来的,跟vue本身设计无关。
因为在JS 中只有函数才存在作用域,data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响,也叫闭包!!

js本身的面向对象编程也是基于原型链和构造函数,应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。

原文地址:https://www.cnblogs.com/zpsakura/p/13632138.html