Vue组件中的data为什么必须是函数


  • 根实例对象data可以是对象也可以是函数“单例”,不会产生数据污染情况
  • 组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。所以需要通过工厂函数返回全新的 data 作为组件的数据源
function Vue() {}

Vue.extend = function (options) {
  function Sub() {
    // 会将data存起来
    this.data = this.constructor.options.data
  }
  Sub.options = options
  return Sub
}
let Child = Vue.extend({
  data: { name: "xxx" },
})
// 两个组件就是两个实例, 希望数据互不干扰
let child1 = new Child()
let child2 = new Child()

console.log(child1.data.name)
child1.data.name = "jw"
console.log(child2.data.name)

Vue3 一切从组件开始,所以 data 都为函数形式。


文章作者: 高红翔
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 高红翔 !
  目录