vue生命周期（简短精干篇）

这是官网给的vue生命周期的图形解释：

简短来讲：
vue生命周期总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建/前后：

在beforeCreated阶段，vue实例的挂载元素el还没有。

在beforeCreated阶段可以添加loading事件，

在created阶段发起后端请求，拿回数据。

载入前/后：

在beforeMount阶段，vue实例的$el和data都初始化，但是挂载之前为虚拟的dom节点，data.message还未替换，页面无重新渲染。

在mounted阶段，vue实例挂载完成，data.message成功渲染。一般可在这个阶段发送ajax请求。

更新前/后：

当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：

在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

转载于:https://www.cnblogs.com/Ashe94/p/10679529.html

vue生命周期（简短精干篇）相关推荐

“约见”面试官系列之常见面试题之第八十八篇之什么是vue生命周期（建议收藏）
我们知道vue是一个构建数据驱动的 web 界面的渐进式框架,那么vue生命周期是什么呢?本篇文章就给大家来介绍一下vue生命周期的内容,希望可以帮助到有需要的朋友. vue生命周期是什么? Vue生 ...
Vue 生命周期篇探索 - 第二篇：生命周期-挂载流程
文章目录探索学习 Vue 生命周期篇第二篇:生命周期-挂载流程以图例分析挂载流程 1. new Vue 2. init Events & Lifecycle 3. beforeCreat ...
Vue 生命周期篇探索-第三篇：生命周期-更新流程
文章目录探索学习 Vue 生命周期篇第三篇:生命周期-更新流程生命周期-更新流程 1. mounted(挂载后) 2. beforeUpdate (更新前) 3. Virtual DOM re- ...
Vue 生命周期探索：第四篇：生命周期-销毁流程
文章目录探索学习 Vue 生命周期篇第四篇:生命周期-销毁流程生命周期_销毁流程 1. beforeDestory (销毁前) 2. Teardown watchers,child compon ...
“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...
“约见”面试官系列之常见面试题第四十一篇之VUE生命周期（建议收藏）
详解Vue Lifecycle 先来看看VUE官网对VUE生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
vue hot true 不起作用_从源码解读 Vuex 注入 Vue 生命周期的过程
第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会 ...
异步加载在Vue生命周期哪个阶段更合理
react高阶面试题中有这么一道:为什么异步请求数据在didMount阶段更合适?同为MVVM中的翘楚,Vue是否也有类似问题呢?另外,我在平时也无开发过程中也会发现,每个人选择的那个生命周期阶段去异 ...
一文带你吃透Vue生命周期（结合案例通俗易懂）
文章目录本篇学习目标 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_axios基 ...

vue生命周期（简短精干篇）

vue生命周期（简短精干篇）相关推荐

最新文章

热门文章