美文网首页收集
vue生命周期详解

vue生命周期详解

作者: Zach_1991 | 来源:发表于2022-02-11 15:19 被阅读0次
1、什么是生命周期?

vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

2、vue生命周期的作用是什么?

vue生命周期包括四个阶段,8个钩子函数,作用在某个阶段给你一个做某些处理的机会。

3、第一次页面加载会触发那几个钩子函数?

beforeCreate、created、beforeMount,mounted

4、简述每个周期具体适合那些场景?

beforecreate:可以在这加个loading事件,在加载实例的时候触发;
created:初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用;
mounted:挂在元素,获取到DOM节点;
updated:如果对数据统一处理,在这里写上相应函数;
beforeDestory:可以做一个确认停止事件的确认框nextTick,更新数据后立即操作dom;

5、created和mounted的区别?

created不能操作DOM节点,mounted可以操作DOM节点;

6、vue获取数据在哪个周期函数?

created/beforeMount/mounted

7、请详细说下你对vue生命周期的理解?

创建前/后:在beforeCreated阶段,vue实例的挂载完el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会在触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。

相关文章

  • vue生命周期

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

  • 入门

    Vue官方文档生命周期详解 vue-routervue-router官方文档vue-router详解

  • Vue生命周期

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

  • 2.vue生命周期钩子

    vue2.0生命周期图文详解 什么是生命周期:

  • 学习链接

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

  • vue 生命周期 详解

    详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从...

  • Vue的生命周期和钩子函数

    Vue的生命周期 Vue示例被创建到销毁的过程 Vue的钩子函数详解

  • 2020-02-11

    vue生命周期详解 摘自:https://www.jianshu.com/p/672e967e201c Vue实例...

  • vue1.0和2.0的生命周期详解

    Vue#1.0和#2.0生命周期详解 1.0 生命周期image2.0 生命周期imageimage 两个版本对比...

  • Vue实例详解与生命周期

    Vue实例详解与生命周期 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务...

网友评论

    本文标题:vue生命周期详解

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