浅谈vue的props,data,computed变化对组件更新的影响


Posted in Javascript onJanuary 16, 2018

本文介绍了vue的props,data,computed变化对组件更新的影响,分享给大家,废话不多说,直接上代码

/** this is Parent.vue */
<template>
 <div>
  <div>{{'parent data : ' + parentData}}</div>
  <div>{{'parent to children1 props : ' + parentToChildren1Props}}</div>
  <div>{{'parent to children2 props : ' + parentToChildren2Props}}</div>
  <div>
   <el-button @click="changeParentData">change parent data</el-button>
   <el-button @click="changeParentToChildren1Props">change parent to children1 data</el-button>
   <el-button @click="changeParentToChildren2Props">change parent to children2 data</el-button>
  </div>
  <my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"></my-children1>
  <my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"></my-children2>
 </div>
</template>

<script>
 import Children1 from './Children1';
 import Children2 from './Children2';
 export default{
  name: 'parent',
  data() {
   return {
    parentData: 'ParentData',
    parentToChildren1Props: 'ParentToChildren1Props',
    parentToChildren2Props: 'ParentToChildren2Props'
   }

  },

  beforeCreate: function() {
   console.log('*******this is parent beforeCreate*********');

  },

  created: function() {
   console.log('######this is parent created######');

  },

  beforeMount: function() {
   console.log('------this is parent beforeMount------');

  },

  mounted: function() {
   console.log('++++++this is parent mounted++++++++');

  },

  beforeUpdate: function() {
   console.log('&&&&&&&&this is parent beforeUpdate&&&&&&&&');

  },

  updated: function() {
   console.log('$$$$$$$this is parent updated$$$$$$$$');

  },

  methods: {
   changeParentData: function() {
    this.parentData = 'changeParentData'

   },

   changeParentToChildren1Props: function() {
    this.parentToChildren1Props = 'changeParentToChildren1Props'

   },

   changeParentToChildren2Props: function() {
    this.parentToChildren2Props = 'changeParentToChildren2Props'

   }

  },
  components: {
   'my-children1': Children1,
   'my-children2': Children2
  }
 }
</script>
/** this is Children1.vue */
<template>
 <div>
  <div>{{'children1 data : ' + children1Data}}</div>
  <div>{{'parent to children1 props : ' + children1Props}}</div>
  <div>{{'parent to children1 props to data : ' + children1PropsData}}</div>
  <div>
   <el-button @click.native="changeChildren1Data">change children1 data</el-button>
   <el-button @click.native="emitParentToChangeChildren1Props">emit parent to change children1 props</el-button>
  </div>
 </div>
</template>

<script>
 export default {
  name: 'children1',
  props: ['children1Props'],
  data() {
   return {
    children1Data: 'Children1Data'
   }
  },

  computed: {
   children1PropsData: function() {
    return this.children1Props
   }
  },

  beforeCreate: function() {
   console.log('*******this is children1 beforeCreate*********');

  },

  created: function() {

   console.log('######this is children1 created######');
  },

  beforeMount: function() {
   console.log('------this is children1 beforeMount------');

  },

  mounted: function() {
   console.log('++++++this is children1 mounted++++++++');

  },

  beforeUpdate: function() {
   console.log('&&&&&&&&this is children1 beforeUpdate&&&&&&&&');

  },

  updated: function() {
   console.log('$$$$$$$this is children1 updated$$$$$$$$');

  },

  methods: {
   changeChildren1Data: function() {
    this.children1Data = 'changeChildren1Data'

   },

   emitParentToChangeChildren1Props: function() {
    console.log('emitParentToChangeChildren1Props');
    this.$emit('changeParentToChildren1Props');
   }
  }
 }
</script>
/** this is Children2.vue */
<template>
 <div>
  <div>{{'children2 data : ' + children2Data}}</div>
  <div>{{'parent to children2 props : ' + children2Props}}</div>
  <div>{{'parent to children2 props to data : ' + children2PropsData}}</div>
  <div>
   <el-button @click.native="changeChildren2Data">change children2 data</el-button>
   <el-button @click.native="emitParentToChangeChildren2Props">emit parent to change children2 props</el-button>
  </div>
 </div>
</template>

<script>
 export default {
  name: 'children2',
  props: ['children2Props'],
  data() {
   return {
    children2Data: 'Children2Data',
    children2PropsData: this.children2Props
   }
  },

  beforeCreate: function() {
   console.log('*******this is children2 beforeCreate*********');

  },

  created: function() {
   console.log('######this is children2 created######');

  },

  beforeMount: function() {
   console.log('------this is children2 beforeMount------');

  },

  mounted: function() {
   console.log('++++++this is children2 mounted++++++++');

  },

  beforeUpdate: function() {
   console.log('&&&&&&&&this is children2 beforeUpdate&&&&&&&&');

  },
  updated: function() {
   console.log('$$$$$$$this is children2 updated$$$$$$$$');

  },

  methods: {
   changeChildren2Data: function() {
    this.children2Data = 'changeChildren2Data'
   },

   emitParentToChangeChildren2Props: function() {
    this.$emit('changeParentToChildren2Props');
   }
  }
 }
</script>
  1. 父组件改变props,子组件如果直接使用props,会触发子组件更新
  2. 父组件改变props,子组件如果将props放进data中再使用,不会触发子组件更新
  3. 父组件改变props,子组件如果将props放进computed中再使用,会触发子组件更新
  4. data,props和computed的变化都会触发组件更新

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

Javascript 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 #Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 #Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 #Javascript
动态加载权限管理模块中的Vue组件
Jan 16 #Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 #Javascript
解析Angular 2+ 样式绑定方式
Jan 15 #Javascript
基于jquery的on和click的区别详解
Jan 15 #jQuery
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
用Python实现数据的透视表的方法
2018/11/16 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
小学老师寄语大全
2014/04/04 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书