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


Posted in Javascript onNovember 27, 2018

前言

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

一、现象

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用props初始化data中变量</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
  <user-info :user-data="user"></user-info>
</div>
<script>
  //全局组件
  let userInfo = Vue.component('userInfo' ,{
    name: 'user-info',
    props: {
      userData: Object
    },
    data() {
     return {
       userName: this.userData.name
     }
    },
    template: `
      <div>
        <div>姓名:{{userName}}</div>
        <div>性别:{{userData.gender}}</div>
        <div>生日:{{userData.birthday}}</div>
      </div>
    `
  });

  //Vue实例
  new Vue({
    el: '#app',
    data: {
      user: {
        name: '',
        gender: '',
        birthday: ''
      }
    },
    created(){
      this.getUserData();
    },
    methods:{
      getUserData(){
        setTimeout(()=>{
          this.user = {
            name: '于永雨',
            gender: '男',
            birthday: '1991-7'
          }
        }, 500)
      }
    },
    components: {
      userInfo
    }
  });
</script>
</body>
</html>

代码解读:

  • 根组件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="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
  <user-info :user-data="user"></user-info>
</div>
<script>
  //全局组件
  let userInfo = Vue.component('userInfo' ,{
    name: 'user-info',
    props: {
      userData: Object
    },
    data() {
     return {
       userName: this.userData.name
     }
    },
    template: `
      <div>
        <div>姓名:{{userName.text}}</div>
        <div>性别:{{userData.gender}}</div>
        <div>生日:{{userData.birthday}}</div>
      </div>
    `
  });


  //Vue实例
  new Vue({
    el: '#app',
    data: {
      user: {
        name: {text: ''},
        gender: '',
        birthday: ''
      }
    },
    created(){
      this.getUserData();
    },
    methods:{
      getUserData(){
        setTimeout(()=>{
          this.user = {
            name: {text: '于永雨'},
            gender: '男',
            birthday: '1991-7'
          }
        }, 500)
      }
    },
    components: {
      userInfo
    }
  });
</script>
</body>
</html>

运行结果:姓名仍然没有值,和第一次结果一样!!!

二、原因

那么,原因到底是什么呢?百思不得解,后来和小伙伴们讨论时,有人提出:会不会因为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="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
  <user-info :user-data="user"></user-info>
</div>
<script>
  //全局组件
  let userInfo = Vue.component('userInfo' ,{
    name: 'user-info',
    props: {
      userData: Object
    },
    data() {
     return {
      userName: this.userData.name
     }
    },
    computed: {
      computedUserName(){
        return this.userData.name
      }
    },
    watch: {
      'userData.name': function (val) {//监听props中的属性
        this.userName = val;
      }
    },
    template: `
      <div>
        <div>姓名(watch):{{ userName }}</div>
        <div>姓名(computed):{{ computedUserName }}</div>
        <div>性别:{{ userData.gender }}</div>
        <div>生日:{{ userData.birthday }}</div>
      </div>
    `
  });


  //Vue实例
  new Vue({
    el: '#app',
    data: {
      user: {
        name: '',
        gender: '',
        birthday: ''
      }
    },
    created(){
      this.getUserData();
    },
    methods:{
      getUserData(){
        setTimeout(()=>{
          this.user = {
            name: '于永雨',
            gender: '男',
            birthday: '1991-7'
          }
        }, 500)
      }
    },
    components: {
      userInfo
    }
  });
</script>
</body>
</html>

运行结果

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

完美!!!

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

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

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

大概梳理一下:

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

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

3.可以变相操作props

(1)在data中声明局部变量,并用props初始化,弊端:局部变量不随着props更新而更新

(2)在computed中对props值转换后输出

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 #Javascript
30分钟快速实现小程序语音识别功能
Nov 27 #Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 #Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 #Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 #Javascript
详解vuex 渐进式教程实例代码
Nov 27 #Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 #Javascript
You might like
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP处理会话函数大总结
2015/08/05 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Python装饰器结合递归原理解析
2020/07/02 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
北京银河万佳Java面试题
2012/03/21 面试题
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
2019客服个人年终工作总结范文
2019/07/08 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers