vue 之 data为什么必须声明为返回一个初始数据对象的函数?

官方解释:

  当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

 

可能你看了官方的解释还是不明白,下面举个例子说明一下。

官方文档说明的很准确了,假定存在组件ComponentA,里面定义为

官方文档说明的很准确了,假定存在组件ComponentA,里面定义为

export default {
    props: {
        title: String
    },
    data: {
        test: 1
    }
}
在某个Page里面我们定义了如下的模板

<template>
    <div>
        <component-a title="1"></component-a>
        <component-a title="2"></component-a>
    </div>
</template>

如果不用function return 每个组件的data都是内存的同一个地址,那一个数据改变其他也改变了,这当然就不是我们想要的。 用function return 其实就相当于申明了新的变量,相互独立,自然就不会有这样的问题

转载于:https://www.cnblogs.com/wusheng2016/p/7444188.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值