Vue data定义为函数的原因?

var Vue = function () {};

Vue.prototype.data = {a: 1, b: 2};

var f1 = new Vue();

var f2 = new Vue();

f1.a = 3;

console.log(f2.a) ; // 3

首先看下上面这段代码,这是一种对象添加属性的方式。

在函数或者类class上进行属性值扩展时,如果使用原型上直接扩展的方式,对象实例化时无法区分不同对象之间的值作用域,用对象的方式初始化data并不合适。

var Vue = function () {

  this.data = this.datas();

};

Vue.prototype.datas = function () {

  return {

    c: 1,

    d: 2

 }

}

var v1 = new Vue();

var v2 = new Vue();

v1.c = 5;

console.log(v2.c);  // 1

  在函数内声明实例属性报存data,每个实例对象的data都是经过一次函数执行得到有不同的返回结果,所以返回data的值具有自己独立的作用域。

* 在定义Vue实例时,给Vue传参是一个对象,对象中data就是一个函数,Vue在实例化的时候会调用这个函数每个实例都会返回新的值,data得到不同的值作用域。

另外,赋值函数不一定要定义在原型上,也可以定义为函数或类的实例方法。