伏龙阁资源网

Vue中用props给data赋初始值遇到的问题解决
站长资源 2024/11/27 佚名
2 0

前言

前段时间做一个运营活动的项目，上线后产品反馈页面埋点不对，在排查过程中发现，问题竟然是由于Vue中的data初始值导致，而data的初始值来自于props。为方便描述，现将问题抽象如下：

一、现象

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用props初始化data中变量</title>
  <script src="/UploadFiles/2021-04-02/vue.min.js">


代码解读：


    
  
  • 根组件data中有一个对象：user，包含三个属性：name、gender、birthday，初始值都为空字符串
    • 
  
  • 模拟api异步请求，500毫秒后对user的重新赋值，三个属性都不再为空
    • 
  
  • 声明一个子组件userInfo，props中有一个对象userData，用于接收父组件的user；data中有一个变量userName，初始值来自于userData.name
    • 



结果：


Vue中用props给data赋初始值遇到的问题解决


页面初始化后，姓名、性别、生日都显示为空，500毫秒后性别和生日显示正常结果，仅姓名没有变化。


为什么会这样呢？


我最初的想法：user.name是String，属于基本数据类型，用它给子组件data中userName赋值，属于基本数据类型赋值，所以当父组件中user.name变化时，子组件中userName并不会随之变化。


是这样的吗？于是我决定将user.name改为对象，通过引用数据类型赋值，然后观察是否符合预期。代码如下：





<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用props初始化data中变量-对象形式</title>
  <script src="/UploadFiles/2021-04-02/vue.min.js">


运行结果：姓名仍然没有值，和第一次结果一样！！！


二、原因


那么，原因到底是什么呢？百思不得解，后来和小伙伴们讨论时，有人提出：会不会因为data在初始化时深拷贝？


我觉得这种解释比较靠谱，于是去收集证据，首先去Vue官网翻了一下关于data的文档，其中：


Vue中用props给data赋初始值遇到的问题解决


当看到"递归地"那个词，基本上就能断定上面的推论是正确的，因为深拷贝的核心原理就是递归。


原来，Vue初始化时会递归地遍历data所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter，用于实现双向绑定。官方文档在Reactivity in Depth一章明确有说：


Vue中用props给data赋初始值遇到的问题解决


还顺便解释了一下为什么Vue不支持IE8的原因：IE8不支持Object.defineProperty。


三、解决办法


既然因为data深拷贝的原因，data无法随着props的变化而更新，我们很自然的就想到Vue中有监听作用的两个功能：watch、computed。




修改代码如下，观察结果：





<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>解决方案：watch、computed</title>
  <script src="/UploadFiles/2021-04-02/vue.min.js">


运行结果


Vue中用props给data赋初始值遇到的问题解决


完美！！！


四、总结：关于Vue中props的要点


事后又仔细翻了一下关于props的文档：


Vue中用props给data赋初始值遇到的问题解决


大概梳理一下：


1.props是单向数据流：父组件的数据变化，通过props实时反应在子组件中，反之不然


2.不允许在子组件中直接操作props


3.可以变相操作props


（1）在data中声明局部变量，并用props初始化，弊端：局部变量不随着props更新而更新


（2）在computed中对props值转换后输出


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接