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鼠标事件大全 推荐收藏
Nov 01 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
使用JS实现简易计算器
Jun 14 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
用cookies来跟踪识别用户
2006/10/09 PHP
php抽象类用法实例分析
2015/07/07 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
axios基本入门用法教程
2017/03/25 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python中xrange用法分析
2015/04/15 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
我的梦中国梦演讲稿
2014/04/23 职场文书
项目经理任命书内容
2014/06/06 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
运动会报道稿300字
2014/10/02 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
员工加薪申请报告
2015/05/15 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python