浅谈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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
JQuery 学习技巧总结
May 21 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 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中序列化与反序列化详解
2017/02/13 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
angular多语言配置详解
2019/05/16 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
事业单位公务员的职业生涯规划
2014/01/15 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
推荐信怎么写
2014/05/09 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
交通事故被告代理词
2015/05/23 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python