当前位置: 首页>前端>正文

Vue2组件的data为什么是函数,而不是对象

以下为个人见解,仅供参考

根实例对象可以是函数也可以是对象(根实例是单例),不会产生数据污染。

组件实例 data 必须为函数,目的是为了防止多个组件实例对象之间共用一个 data(组件在创建的时候,源码会进行选项合并,会对定义的data进行数据校验,如果不是function,则出现警告),产生数据污染。采用函数的形式,initData 时会将其作为工厂函数会返回全新 data 对象。

下面用例子说明为什么不能是对象:

data是对象,数据之间会共用、污染

function Component() {}
Component.prototype.data = {
    counter: 1
}
const c1 = new Component()
const c2 = new Component()
console.log(c1.data.counter)
c1.data.counter = 2
console.log(c1.data.counter) // 2
console.log(c2.data.counter) // 2

data使用函数形式就不会造成数据污染

function Component2 () {
    this.data = this.data()
}
Component2.prototype.data = function() {
    return {
        counter: 1
    }
}
const cA = new Component2()
const cB = new Component2()
console.log(cA.data.counter)
cA.data.counter = 2
console.log(cA.data.counter) // 2
console.log(cB.data.counter) // 1

https://www.xamrdz.com/web/2yh1948213.html

相关文章: