Vue中你可能认为是bug的情况原来是这样的

前言

我们知道Vue框架剧本双向数据绑定功能,在我们使用方便的同时,还有一些细节问题我们并不知道,接下来一起探讨一些吧

双向数据绑定

js变量改变影响页面

页面改变影响js变量

Vue2是如何做到数据绑定的

以上需要说的就是: Vue中data函数返回的对象,会经过层层遍历,最后将所有的对象通过以上方法,把其属性进行监视。

通过xxx.xxx = 'xxx' 就会触发set函数

通过xxx.xxx 就会触发get函数

关于数组与基本数据类型的奇葩现象

我们声明好数组,其中放置基本数据类型

现在我们改变其中的元素值

如图所见,我们改变数组中某个元素的值,并未发现页面改变

解答疑问

首先我们知道作为data的属性,Vue都会通过for in 来遍历该对象的所有属性及子属性,然后针对每个属性进行reactive式的数据劫持。

但是当遍历数组或对象属性时,如果是非对象数据类型,就如下图

我们可以看到在Vue中 对于reactive操作,非对象数据类型是不管的,因此,我们更改vm.arr[0] = 98没有效果

想办法解决

哇,有效果!!

我们再来改变他看看是否能双向数据绑定

哦!No!看看源码

看到了吗?基本(原始)数据类型还给个警告!!

往下执行,如果是数组直接结束了,并不做reactive操作哦

总结

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200224A0N8JA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券