文档章节

vue 中 父组件与子组件的 生命周期

_晓旭
 _晓旭
发布于 2017/07/05 09:21
字数 194
阅读 74
收藏 0

干前端快一年了,在自己的博客中把开发中遇到特别的知识点在这里记录下

今天想看看vue中子组件的生命周期与父组件的关系,查了资料没找到,就自己试了一下

 

父组件:  

  beforeCreate () {

   console.log('parent beforeCreate')

   },

   created () {

   console.log('parent created')

   },

   beforeMount () {

   console.log('parent beforeMount')

   },

   mounted () {

   console.log('parent mounted')

   },

   beforeUpdate () {

   console.log('parent beforeUpdate')

   },

   updated () {

   console.log('parent updated')

   },

   activated () {

   console.log('parent activated')

   },

   deactivated () {

   console.log('parent deactivated')

   },

   beforeDestroy () {

   console.log('parent beforeDestroy')

   },

   destroyed () {

   console.log('parent destroyed')

   },

子组件:

beforeCreate () {

console.log('son beforeCreate')

},

created () {

console.log('son created')

},

beforeMount () {

console.log('son beforeMount')

},

mounted () {

console.log('son mounted')

},

beforeUpdate () {

console.log('son beforeUpdate')

},

updated () {

console.log('son updated')

},

activated () {

console.log('son activated')

},

deactivated () {

console.log('son deactivated')

},

beforeDestroy () {

console.log('son beforeDestroy')

},

destroyed () {

console.log('son destroyed')

}

 

结果:

parent beforeCreate
parent created
parent beforeMount
son beforeCreate
son created
son beforeMount
son mounted
parent mounted
parent beforeDestroy
son beforeDestroy
son destroyed
parent destroyed

© 著作权归作者所有

_晓旭
粉丝 0
博文 10
码字总数 1144
作品 0
杭州
程序员
私信 提问
vue中需要注意的问题总结(上)

文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格外需要注意的点; 为了深入的理解官方文档中对这些问题的解释,查阅了一些资料...

funnycoderstar
2018/10/30
0
0
深入解析Vue 和微信小程序的区别、比较

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。 一、生命周期 先贴两张图:vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多。vue的钩...

前端攻城小牛
02/17
1K
0
学了这么久,vue和微信小程序到底有什么样的区别?

前言 写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。相比之下,小程序的钩子函数要简单得多。 写了vue项目和小程序,发现二者有许多相同之处,在此想总结...

codeGoogle
2018/08/10
0
0
Vue基于snabbdom做了哪些事

前言 之前有简单看过 Vue patch 部分的源码,了解了是基于 Snabbdom 库实现的。最近想详细了解下 Vue 处理 vnode patch 的整个过程,想知道它在 Snabbdom 之上做了哪些事情?所以带着这个问题...

令狐洋葱
06/24
0
0
Vue父子组件生命周期执行顺序及钩子函数的个人理解

先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程...

余大彬
2018/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Eureka应用注册与集群数据同步源码解析

在之前的EurekaClient自动装配及启动流程解析一文中我们提到过,在构造DiscoveryClient类时,会把自身注册到服务端,本文就来分析一下这个注册流程 客户端发起注册 boolean register() t...

Java学习录
29分钟前
8
0
Java描述设计模式(15):责任链模式

本文源码:GitHub·点这里 || GitEE·点这里 一、生活场景描述 1、请假审批流程 公司常见的请假审批流程:请假天数 当 day<=3 天,项目经理审批当 3<day<=5 天,部门经理审批当 day>5 天...

知了一笑
40分钟前
7
0
总结:数组与链表

1、内存申请:数组在内存上是连续的空间;链表,内存地址上可以是不连续的。 2、查询速度:数组可以随机访问,链表必须顺序访问,即从首个元素开始遍历,逐个查找,所以数组查询很快。 3、写入...

浮躁的码农
48分钟前
6
0
HashMap源码分析

read

V丶zxw
今天
5
0
Python字符串或JSON字符串转字典dict、列表list

有3种方法 1、使用ast模块 >>> import ast>>> s = '["test",1]'>>> ast.literal_eval(s)['test',1]>>> s = '{"test":1}'>>> ast.literal_eval(s){'test': 1} 2、eval函数,这个......

编程老陆
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部