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得到不同的值作用域。
另外,赋值函数不一定要定义在原型上,也可以定义为函数或类的实例方法。