vue生命周期的快速记忆方法

概念

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。而生命周期中的各种事件被称为生命周期钩子函数。

创建期间的生命周期函数：

beforeCreate：在实例初始化时同步调用。此时数据观测、事件等都尚未初始化。

created：在实例创建之后调用。此时已完成数据绑定，事件方法，但尚未开始DOM编译，即未挂载到document

beforeMount: 此时已经完成了模板的编译，但是还没有挂载到页面中

运行期间的生命周期函数：

mounted：编译结束时调用，此时所有指令都以生效，触发DOM更新，但不保证$el已插入文档。

beforeUpdated：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

[文章参考：https://blog.csdn.net/mqingo/article/details/86031260]

vue生命周期的快速记忆方法相关推荐

vue 生命周期的11中方法详解
vue 生命周期的十一中方法详解 vue 生命周期的定义 vue实例从创建到销毁,也就是说从创建 -> 初始化数据-> 编译模版 -> 挂载Dom -> 渲染更新 -&g ...
vue源码解析：vue生命周期方法$destory方法的实现原理
我们知道vue生命周期的最后一个阶段是销毁阶段,那么vue会调用自己的destory函数,那么$destory函数的实现原理是什么?且往下看. 用法: vm.$destroy() 作用: 完全销毁一个 ...
二、Vue（发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画)）
一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用 ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
标注图+部分举例聊聊Vue生命周期
"你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高." 现在项目中遇到了,好好回头总结一波Vue生命周期,以后用到的时候再来翻翻. 啥叫Vue生命周 ...
vue hot true 不起作用_从源码解读 Vuex 注入 Vue 生命周期的过程
第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会 ...
一文带你吃透Vue生命周期（结合案例通俗易懂）
文章目录本篇学习目标 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_axios基 ...
详解vue生命周期及每个阶段适合进行的操作
VUE生命周期的四个阶段 create 创建 -------- 创建vue实例并初始化 mount 挂载 -------- 把vue实例和视图进行关联 update 更新 ------- 监听数据与视 ...
[vue] vue生命周期总共有几个阶段？
[vue] vue生命周期总共有几个阶段? beforeCreate:在 new 一个 vue 实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建.created:data 和 met ...
“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...

vue生命周期的快速记忆方法

vue生命周期的快速记忆方法相关推荐

最新文章

热门文章