vue父子组件钩子函数的执行顺序

加载渲染过程

 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

补充钩子函数的执行顺序

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  • errorCaptured

总结:
1.beforeCreate执行时:data和el均未初始化,值为undefined

2.created执行时:Vue 实例观察的数据对象data已经配置好,已经可以得到data的值,但Vue 实例使用的根 DOM 元素el还未初始化

3.beforeMount执行时:data和el均已经初始化,但此时el并没有渲染进数据,el的值为“虚拟”的元素节点

4.mounted执行时:此时el已经渲染完成并挂载到实例上

5.beforeUpdate和updated触发时,el中的数据都已经渲染完成,但只有updated钩子被调用时候,组件dom才被更新。

思考:
1.在created钩子中可以对data数据进行操作,这个时候可以进行数据请求将返回的数据赋给data

2.在mounted钩子对挂载的dom进行操作,此时,DOM已经被渲染到页面上。

3.虽然updated函数会在数据变化时被触发,但却不能准确的判断是那个属性值被改变,所以在实际情况中用computed或match函数来监听属性的变化,并做一些其他的操作。

4.所有的生命周期钩子自动绑定 this 上下文到实例中,所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是导致this指向父级。

5.在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载或切换状态的时候进行某些操作,可以使用activated钩子触发。

原文地址:https://www.cnblogs.com/imMeya/p/11676840.html

时间: 2024-11-01 13:10:53

vue父子组件钩子函数的执行顺序的相关文章

Unity3D中组件事件函数的执行顺序

事件函数的执行顺序 Unity 脚本中有许多按预设顺序以脚本身份运行的事件函数.其执行顺序如下: 加载第一个场景 启动场景时调用这些函数(为场景中的每个对象调用一次). Awake: 始终在调用任何 Start 函数之前和实例化预设之后调用此函数.(如果游戏对象 (GameObject) 在启动期间处于非活动状态,则直到其处于活动状态时或调用添加至其本身的任何脚本中的函数时,再调用 Awake 函数.) OnEnable: (仅当对象 (Object) 处于活动状态时调用此函数):程序会在启用该

VueRouter和Vue生命周期(钩子函数)

一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router需要相应的js文件,可到官网下载或者使用CDN: https://unpkg.com/vue-router/dist/vue-router.js使用Vue需要引入相应的JS文件,可到官网下载或者直接使用CDN:https://cdn.jsdelivr.net/npm/[email protected

事件函数的执行顺序

 事件函数的执行顺序 在unity的脚本,有大量的脚本执行按照预先确定的顺序执行的事件函数.此执行顺序说明如下: Editor Reset: Reset调用来初始化脚本的属性,当它第一次附加到该对象,并且使用Reset命令时. 第一次Scene Load scene启动 (一次为每个场景中的对象) 时,会调用这些函数. Awake:此函数始终是开始任何职能之前调用,并且也是在一个预置实例化之后.(如果一个游戏对象处于非活动状态,Awake不会被调用当被激活时 或者一个附加到游戏对象的任何脚本

Drupal主题预处理函数与处理函数的执行顺序

Drupal的主题机制当中存在很多种预处理函数和处理函数,看起来让人犯晕.本文为大家总结了它们执行的基本规律. Drupal的所有预处理函数在处理函数之前运行. template前缀的函数首先运行,module前缀的函数其次运行,theme前缀的函数最后运行. Drupal的多钩子函数在特定钩子函数之前运行. 下面是总结的执行顺序列表,自上而下执行: template_preprocess() template_preprocess_HOOK() MODULE_preprocess() MODU

unity3D技术之事件函数的执行顺序[转]

unity3D技术之事件函数的执行顺序 转自http://www.yxkfw.com/?p=13703 在unity的脚本,有大量的脚本执行按照预先确定的顺序执行的事件函数.此执行顺序说明如下: Editor Reset: Reset调用来初始化脚本的属性,当它第一次附加到该对象,并且使用Reset命令时. 第一次Scene Load scene启动 (一次为每个场景中的对象) 时,会调用这些函数. Awake:此函数始终是开始任何职能之前调用,并且也是在一个预置实例化之后.(如果一个游戏对象处

vue父子组件之间传值

vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种vue-cli搭建的同理 父组件通过 v-bind:属性名(自定义的) = "要传递的数据" 子组件通过 props:["属性名"]  这个属性名就是父组件传递过来的数据信息 <div id="app"> <mod :abc=&qu

一个故事讲懂vue父子组件传值

作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过props属性来实现父组件: <template>  <div id="app">    <child-component v-bind:dataOfChild="dataOfParent"></child-component&

Vue路由的钩子函数

vue路由的钩子函数首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能. beforeEach主要有3个参数to,from,next: to:route即将进入的目标路由对象, from:route当前导航正要离开的路由 next:function一定要调用该方法resolve这个钩子.执行效果依赖next方法的调用参数.可以控制网页的跳转. 原文地址:https://www.cnblogs.com/Su-feng

Tip8:Unity中诸如 Awake() Start() Update()等函数的 执行顺序

Unity脚本中有很多的事件函数,下面是各种函数的执行顺序: 1.reset(); 2.Awake(); 3.OnEnable; 4.OnLevelWasLoaded(); 5.Start(); 6.OnApplicationPause(); 7.FixedUpdate(); 8.Update(); 9.LateUpdate(); 10.Rendering(渲染)类 11.Coroutines(协调程序)类 12.OnDestroy(); 13.OnApplicationQuit(); 14.O