vue 为什么组件的data要写成返回对象的函数

原因:对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对(Object的实例),引用地址不同,则不会出现这个问题

上面解释完,你可能还是不大清楚,下面我们举个简单的例子:

  // 1.对象方式(所有重用的实例中的data均为同一个对象)

  var data = {

    x: 1

  }

  var vm1 = {

    data: data

  }

  var vm2 = {

    data: data

  }

  vm1.data === vm2.data // true,指向同一个对象

  // 2.函数方式(所有重用的实例中的data均为同一个函数)

  var func = function () {

    return {

      x: 1

    }

  }

  var vm3 = {

    data: func

  }

  var vm4 = {

    data: func

  }

  vm3.data() === vm4.data() // false,指向不同对象

注意: 函数方式中data都指向同一个函数,但这个函数每次的返回值都是一个新的对象,可以尝试如下(效果相同)

{x:1} === {x:1} // false

new Object({x:1}) === new Object({x:1}) // false

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容