您的位置：首页 > Web前端 > Vue.js

Vue的学习总结自测（三）—— vue生命周期、Vue 的父组件和子组件生命周期钩子函数执行顺序、生命周期内调用异步请求

2019-09-18 19:44 1581 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_42817747/article/details/100995482

目录：

  • 对Vue生命周期的理解
  • Vue 的父组件和子组件生命周期钩子函数执行顺序
  • 生命周期内调用异步请求

（1） 生命周期是什么？
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
（2）各个生命周期的作用
用表格描述：

beforeCreate 组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate 组件数据更新之前调用，重新构建的虚拟 DOM与上次的虚拟dom ,通过diff算法进行对比
updated 组件更新之后，数据更改完成，dom也重新render完成
activited keep-alive 专属，组件被激活时调用
deadctivated keep-alive 专属，组件被销毁时调用
beforeDestory 组件销毁前调用，做一些善后工作，例如清楚计时器，清除非指令绑定的事件等等
destoryed 组件销毁后调用

附上腾讯课堂视频讲解vue生命周期图：

8、Vue 的父组件和子组件生命周期钩子函数执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

  • 加载渲染过程
    父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  • 子组件更新过程
    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  • 父组件更新过程
    父 beforeUpdate -> 父 updated

  • 销毁过程
    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

9、在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

  • 能更快获取到服务端数据，减少页面 loading 时间；
  • 阶段可以访问data，使用watcher、events、methods，也就是说 数据观测(data observer) 和event/watcher 事件配置 已完成。
  • ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

参考链接：https://mp.weixin.qq.com/s/kB1Ncsbccd110LSW5qnxQA

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航