浅谈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 版本的文本输入框检查器Input Check
Jul 09 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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 Ubb代码编辑器函数代码
2012/07/05 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
django admin组件使用方法详解
2019/07/19 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
学校七一活动方案
2014/01/19 职场文书
应届生求职信
2014/05/31 职场文书
2014年租房协议书范本
2014/10/30 职场文书
高一军训决心书
2015/02/05 职场文书
索赔员岗位职责
2015/02/15 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers