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 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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
ThinkPHP之N方法实例详解
2014/06/20 PHP
php解析xml方法实例详解
2015/05/12 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python实现员工管理系统
2018/01/11 Python
Python列表切片操作实例总结
2019/02/19 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
python如何写出表白程序
2020/06/01 Python
党员自我评价分享
2013/12/13 职场文书
高一物理教学反思
2014/01/24 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
医院信息公开实施方案
2014/05/09 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
方法汇总:Python 安装第三方库常用
2022/04/26 Python