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

 

欢迎关注、点赞

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值