浅谈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 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
javascript函数特点实例分析
May 14 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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
PHP5中MVC结构学习
2006/10/09 PHP
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python Property属性的2种用法
2015/06/21 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
创建Django项目图文实例详解
2019/06/06 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
个人职业生涯规划书1500字
2013/12/31 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年大学生实习评语
2015/03/25 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android