Vue.js生命周期函数

一、Vue.js生命周期简介（直观图）

二、生命周期函数就是vue实例在某一个时间点会自动执行的函数

从Vue的创建到运行、销毁总是伴随着各种各样的事件，这些事件统称为生命周期，生命周期钩子是别名。Vue的生命周期，也就是钩子函数；Vue一共有10个生命周期函数，

三、生命周期函数分类：

创建阶段的生命周期函数

首先通过var vm = new Vue({}) 创建一个Vue实例对象，vm是一个空的Vue实例对象

beforeCreate() （初始化之后）在beforeCreate()生命周期函数执行的时候，vue对象中的data和methods中的数据没有初始化，在beforeCreate()中无法访问data数据和methods中的方法；
created() （创建完成）此时data数据和methods中的方法已经初始化好了，也就是说，created()函数是最早能够访问data数据和methods中的方法的生命周期函数；
beforeMount()（挂载之前）beforeMount()函数之前，Vue开始编译模板，把Vue代码中的指令进行执行，最终在内存中生成一个编译好的模板字符串，然后把这个模板字符串渲染为内存中的DOM。注意：此时只是把模板字符串渲染在内存中，还没有真正挂载在页面上。当beforeMount()函数执行的时候，模板已经在内存中编译好了，只是没有渲染到页面上，页面中还是旧的模板字符串，没有被真正的数据值替换过来；
mounted()（被挂载之后）此函数执行时，模板字符串已经真正的挂载在页面中，用户可以看到渲染好的页面，注意：mounted是创建阶段的最后一个生命周期函数，当mounted执行完，表示实例已经创建好了。此时组件脱离创建阶段，进入运行阶段

运行阶段的生命周期函数

beforeUpdate()（数据更新前）此函数执行时，界面数据还没有更新，但是data中的数据已经更新了，页面尚未和内存中的data同步；
updated()（被更新后）先根据data中最新的数据在内存中重新渲染一份新的DOM树，然后把最新的DOM树渲染到真正的页面中去，就完成了从data（Model）→ view的更新；此函数执行时，页面data已经和内存中保持同步，都是最新的数据。

<keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated() keep-alive组件激活时调用，也就是当页面存在缓存时调用。进入当前存在activated()函数的页面时，一进入页面就触发，可用于初始化页面数据等

deactivated() keep-alive 组件停用时调用，该钩子在服务器端渲染期间不被调用，在页面结束时触发该方法，可清除掉滚动方法等缓存。

销毁阶段的生命周期函数

beforeDestory() （销毁之前）当执行beforeDestory()函数时，Vue实例已经从运行阶段进入销毁阶段，当执行beforeDestory()时候，data和methods、指令、过滤器还处于可用状态，没有被销毁；
destoryed()（销毁之后）当执行destoryed()函数时候，组件已经完全销毁，所有数据都不可用；

Vue.js生命周期函数相关推荐

（vue基础试炼_07）Vue实例生命周期函数
文章目录一.生命周期图示二.常见的生命周期函数三.生命周期函数执行场景四.测试代码五.项目开源地址一.生命周期图示二.常见的生命周期函数常见的生命周期函数执行的时间 beforeCr ...
【Vue】—生命周期函数
[Vue]-生命周期函数(钩子函数) beforeCreate 创建前(初始化事件,生命周期函数) created 创建完成(初始化注入和校验) beforeMount 渲染前(把页面编译成虚拟DOM ...
vue 的生命周期函数
vue 的生命周期函数,有那些?在项目中怎么使用?以及应用场景? 1.vue的生命周期函数分为:创建前 beforeCreate :在实例初始化之后执行此时对象还未创建,el 和data并未初始化,因 ...
前端学习之vue的生命周期函数
一.什么是生命周期函数我想,对于生命周期,咱都不会陌生,所谓生命周期,就是一个过程,从开始到结束,顾名思义,就像生命一样,从诞生到消逝.而生命周期函数,就是在这个生命周期的不同阶段中会被调用的函数, ...
Vue：生命周期函数的作用
Vue:生命周期函数的作用前言 Vue实例有一个完整的生命周期,也就是说从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某 ...
Vue.js 生命周期
2019独角兽企业重金招聘Python工程师标准>>> 每个 Vue 实例在被创建之前都要经过一系列的初始化过程 vue在生命周期中有这些状态, beforeCreate,creat ...
Vue.js生命周期
代码展示如下: <!-- @Author: Mr.J@Date: 2019-05-05 22:31:35 @Last Modified by: Mr.J@Last Modified time: ...
Vue实例生命周期函数（钩子函数）详解
一.钩子函数在了解vue生命周期函数之前,我们先看看啥叫"钩子函数"?百度一下是这样一段官方解释:"钩子函数是Windows消息处理机制的一部分,通过设置"钩 ...
vue的生命周期函数
一.生命周期又名:生命周期回调函数.生命周期函数.生命周期钩子. 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的. 生命 ...

Vue.js生命周期函数

一、Vue.js生命周期简介（直观图）

二、生命周期函数就是vue实例在某一个时间点会自动执行的函数

三、生命周期函数分类：

Vue.js生命周期函数相关推荐

最新文章

热门文章

Vue.js生命周期函数

一、Vue.js生命周期简介 （直观图）

二、生命周期函数就是vue实例在某一个时间点会自动执行的函数

三、生命周期函数分类：

Vue.js生命周期函数相关推荐

最新文章

热门文章

一、Vue.js生命周期简介（直观图）