引入

使用一个vue-li搭建的项目，想在页面渲染前从后端拿数据，对挂载的dom进行操作，将初始化的数据改为后端数据。
这样就涉及到生命周期函数的应用了，我们来看看官方给的钩子函数

生命周期函数共有10个

生命周期函数	详细
beforeCreate	在实例初始化之后，数据观测和event/watcher事件配置之前被调用
created	实例已经创建完成之后被调用，挂载阶段开始之前，$el属性目前不可见
beforeMount	在挂载开始之前被调用
mounted	vm.$el替换初始的el并挂载到实例上之后调用
beforeUpdate	数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前
updated	由于数据更改导致的DOM重新渲染和打补丁之后会调用这个生命周期函数
activated	keep-alive组件激活时调用
deactivated	keep-alive组件停用时调用
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

一般用法

beforeCreate:实例初始化了,但是还没有$el/data/message等,可以在这加个loading事件(自己控制装载的细节)
created:在这里结束loading,还做一些初始化,实现函数自执行
mounted: 在这里发起后端请求,拿后台数据,配合路由钩子做一些事情(这里的dom已经挂载了,一般可以在这里修改数据)
beforeDestory: (实例销毁之前执行, 例如你要关闭页面,这里弹出一个"你确定关闭该页面XX"等的消息)
destoryed:(当前组件已经被删除,这里可以用来清除一些关联的数据(例如这个组件有数据在其他组件,但是你要求这个组件关闭之后,另一个组件的数据清除,除了用数据引用的方式还可以用这个钩子函数))
如果我们的子组件需要在每次加载的时候进行操作,就可以使用activated钩子触发()
beforeUpdate和updated钩子一般是在你数据更新的时候写的(例如你数据更新的时候要做一下数据格式检验等操作就在这里写函数)

参考

vue的官方文档真的写的太优雅了, 墙裂推荐!!!
仙人指路☞V2官方文档

vue2的生命周期函数相关推荐

【Vue2.0】—生命周期函数（十）
生命周期函数生命周期函数又叫:生命周期回调函数,生命周期函数. 生命周期钩子是什么:Vue在关键时刻帮我们调用一些特殊名称的函数生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 ...
vue2.0生命周期数据共享
3.1 组件的生命周期 1.概念 (1)生命周期:是指一个组件从创建.运行.销毁的整个阶段,强调的是一个时间段 (2)生命周期函数:是由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序执行 ...
Vue3生命周期函数的那些事
前言这篇文章给大家介绍关于Vue3中生命周期函数的问题使用过Vue3的朋友都知道,随着 composition API 的引入,我们在使用钩子函数上也发生了一些改变 Vue3的生命周期函数下面告 ...
Vue3生命周期函数
Vue3生命周期函数与vue2的对比: Vue3的setup语法糖直接代替beforeCreate,Created:Destroy更名为Unmount:其他就是直接加on beforeCreate - ...
vue3.0生命周期函数
什么是生命周期: vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在vue2.x中的生命周期为 before ...
Vue生命周期函数详解
生命周期图生命周期方法 var vm = new Vue({el: '#app',data: {msg:'ok'},methods: {show:function () {console.log(& ...
react生命周期函数
在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法.通常分为以下几类: 组件加载的时候触发的函数:constructor .componentWill ...
uniapp里的mounted_uni-app 生命周期函数执行顺序
{{message}} 点击 import { mapState, mapMutations } from 'vuex'; var key = 0; export default { data() { ...
小程序的生命周期函数？
onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面初次渲染完成 onShow Function 生命周期函数--监听页面显示 on ...

vue2的生命周期函数

引入

生命周期函数共有10个

一般用法

参考

vue2的生命周期函数相关推荐

最新文章

热门文章