所谓的vue的生命周期就是vue的实列从创建到销毁的整个过程,每个过程都有不同的钩子函数,利用这些不同的钩子函数来做不同的事情,可以理解成生命的开始到结束。

注:在组件的整个生命周期内,钩子函数都是可被自动调用的,且生命周期函数的执行顺序与书写的顺序无关

vue的实例化创建:new Vue 实例开始创建

vue内获取dom元素通常使用ref,

<div ref="box"></box>

使用方法

 this.$refs.box

我们在Vue中常见的钩子函数(8个):

beforecreate--实例创建前

该函数执行在组件创建、实例初始化之后被调用

在该阶段组件未创建,不能访问数据,组件中的 data,ref 均为 undefined

Created--实例创建后

该函数在组件创建完成后被立即调用

可以对data进行操作了,即可以访问数据,发请求,ref依旧是undefined

beforeMount--挂载前

该函数在组件挂载之前调用

在该阶段页面上还没渲染出 HTML 元素,data 初始化完成,ref 依旧不可以操作

Mounted--挂载后

该函数是页面完成挂载之后执行的,可以拿到数据和节点,实例被挂载后调用。

这时可以操作 ref 了 

经常在这里获取dom元素 ,有时候我们获取不到dom元素的话 通常使用$nextTick方法来解决

beforeupdate--更新前

该函数在数据更新时调用

这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件

这个钩子函数在服务器端渲染时不被调用

Updated--更新后

由于数据更改导致的虚拟 DOM 重新渲染,这之后会调用该钩子函数,在数据更新之后做些处理,监听数据的变化

这个钩子函数在服务器端渲染期间不被调用

beforedestory--销毁前

该函数在实例销毁之前调用, ref 仍然可以操作,实例仍然可用

这个钩子函数在服务器端渲染期间不被调用

Destroyed--销毁后

该函数在组件销毁的时候执行,即实例销毁后调用,这里的 ref 不存在。

这个钩子函数在服务器端渲染期间不被调用

另外三个(activated de-- errorCapture)

Logo

前往低代码交流专区

更多推荐