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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
layer实现弹出层自动调节位置
Sep 05 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 压缩文件夹的类代码
2009/11/05 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
vue实现搜索功能
2019/05/28 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
详解python分布式进程
2018/10/08 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
生产厂长岗位职责
2014/02/21 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2014年化验室工作总结
2014/11/21 职场文书
党校个人总结
2015/03/04 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
药房管理制度范本
2015/08/06 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS