浅谈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 相关文章推荐
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 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错误级别的设置方法
2013/06/17 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue2 前端搜索实现示例
2018/02/26 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
高中体育教学反思
2014/01/24 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
毕业论文致谢词
2015/05/14 职场文书
实习指导老师意见
2015/06/04 职场文书
员工离职证明范本
2015/06/12 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
分享提高 Python 代码的可读性的技巧
2022/03/03 Python