美文网首页
Vue生命周期及组件生命周期

Vue生命周期及组件生命周期

作者: 苹果咏 | 来源:发表于2021-03-02 15:14 被阅读0次
Vue生命周期
Vue生命周期
Vue生命周期钩子函数

created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态

创建组件:
创建组件过程

创建父组件
创建子组件
渲染子组件
渲染父组件

也就是创建是由外到内,渲染是由内到外

更新组件:
更新组件过程

父组件触发更新
子组件触发更新
子组件更新
父组件更新

同样是触发更新是由外到内,更新是由内到外

销毁组件
销毁组件

父组件准备销毁
子组件准备销毁
子组件销毁
父组件销毁
所以销毁父组件时,先将子组件销毁后才会销毁父组件

总结:
加载渲染过程:
父beforeCreate > 父created > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted >父mounted
更新过程:
父beforeUpdate > 子beforeUpdate > 子updated > 父updated
销毁过程:
父beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed

相关文章

  • Vue生命周期

    1.Vue生命周期概述 生命周期是指vue组件从生到死特定阶段调用的方法. 生命周期钩子 = 生命周期函数 = 生...

  • 轻松玩转VUE 2.0及常用组件

    轻松玩转VUE 2.0及常用组件 一、vue1.vue生命周期Ⅰ、created =>作用:编译模板,把data里...

  • vue 父组件监听子组件生命周期

    # vue 父组件监听子组件生命周期 主要是通过@hook:生命周期即可监听示例:

  • vue面试题总结

    1、vue生命周期 生命周期描述beforeCreate组件实例被创建之初,组件的属性生效之前created组件实...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • 09-生命周期及非父子组件间的通信

    一. Vue生命周期 二、生命周期代码 三、非父子组件通信 vue中非父子组件通信需要借助一个空的vue实例,案...

  • 关于vue开发中注意的点

    生命周期及回调: 不要在vue组件的固定选项(生命周期钩子、watcher等)或者回调使用箭头函数:类似creat...

  • vue的生命周期

    一、概念 vue生命周期,又叫生命周期钩子函数,是组件从创建到销毁的过程。下面是vue官网的vue生命周期图 二、...

  • vue 高频面试题

    一、Vue生命周期 1.1 Vue生命周期都有哪些? 1.3 一旦进入组件或者一旦进入页面,会执行哪些生命周期? ...

  • vue基础

    js变量分为 vue组件通讯 vue生命周期 函数dataelthismethodspropsbeforeCrea...

网友评论

      本文标题:Vue生命周期及组件生命周期

      本文链接:https://www.haomeiwen.com/subject/bhmtqltx.html