vue源码研究--Data为啥要写成函数?

大家在使用vue的时候,肯定有想过为什么 data 要写成函数,而不允许写成对象?
首先我们要想到:

  1. data是 Vue 实例上的一个属性。
  2. 对象是对于内存地址的引用。
  3. 函数有自己的作用域空间。
    vue 实例中的data是对象的写法,但是在组件中data是函数的写法,是因为写成函数,会有函数作用域的概念 ,是私有函数,只作用到当前组件中,不会影响到其它各个不同的组件。

第一点无可厚非,data属性附着于 Vue 实例上。

第二点,JS 的数据类型分为基本类型和引用类型,基本类型存储在栈内存中,引用类型存储在堆内存中,并且引用类型指向的是栈内存中的堆区地址。下面两个例子可以帮助你清晰地理解这句话。
基本数据类型赋值:

var a = 10;
var b = 10;
var c = a;
console.log(a === b); // true 
a ++ ;
console.log(a); // 11
console.log(c); // 10
a变化了 c没有变化

这段代码分别给 a、b 赋值 10,a 和 b 是全等的。然后用 a 来初始化 c,那么 c 的值也是 10。但 c 中的 10 与 a 中的是完全独立的,该值只是 a 中的值的一个副本,此后, 这两个变量可以参加任何操作而相互不受影响。具体位置如下示意图。
在这里插入图片描述
引用类型赋值


                
  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值