美文网首页每日一文
vue生命周期总结

vue生命周期总结

作者: 永恒即是最美 | 来源:发表于2021-01-12 13:41 被阅读0次

顺序从上自下:

一、create 创建前后:
1.beforeCreate 实例初始化 
2.created 实例已经创建
二、mount 挂载前后:
3.beforeMount 挂载开始之前
4.mounted 挂载到实例
三、destroyed 销毁前后:
5.beforeDestroy 实例销毁前调用
6.destroyed 实例销毁后调用
触发update 更新前后:
1.beforeUpdate 更新前调用
2.updated 更新重新渲染DOM
组件的生命周期钩子:

activated:keep-alive 组件激活时调用
deactivated:keep-alive 组件停用时调用
errorCaptured :当捕获一个来自子孙组件的错误时被调用,收到三个参数:错误对象发生错误的组件实例以及一个包含错误来源信息的字符串,此钩子可以返回false以阻止该错误继续向上传播。

keep-alive拓展:

keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。它是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。

keep-alive Props

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

相关文章

  • 学习链接

    vue-router教程总结 vue生命周期和钩子函数 详解vue生命周期 Vue2.0八——知识点整理 vuex...

  • Vue生命周期及其用法(2019-03-22)

    Vue框架生命周期总结 一、生命周期运行图 二、所有生命周期 三、用法 1.组件创建前 这个阶段主要是完成vue中...

  • vue面试题集

    1. vue生命周期 生命周期总结beforecreate:可以加个loading事件created:在这边可以结...

  • vue生命周期学习

    看了vue好长时间了,总结下vue的生命周期,以备以后查询。 在Vue的整个生命周期中,它提供了一系列的事件,可以...

  • vue生命周期

    一 vue生命周期 Vue的生命周期:就是vue实例从创建到销毁的全过程 二 vue生命周期钩子 vue生命周期...

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • vue生命周期分析

    无论是面试也好还是做项目中也好,Vue生命周期钩子函数都是特别重要的;下面是给大家总结的vue生命周期每个钩子函数...

  • 面试前的总结-vue篇

    总结一些vue的面试题吧,为了年后的面试作准备。 vue指令 vue的生命周期 computed 和watch的区...

  • 2020-05-24

    日常知识点总结(vue篇): 1、vue的生命周期: Vue实例从开始创建,初始化数据,编译模板,挂载Dom->渲...

网友评论

    本文标题:vue生命周期总结

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