我对vue生命周期的理解
所谓的vue的生命周期就是vue的实列从创建到销毁的整个过程。vue的实例化创建:new Vue 实例开始创建。vue内获取dom元素通常使用ref,<div ref="box"></box>使用方法this.$refs.box我们在Vue中常见的钩子函数(8个)
所谓的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)
更多推荐
所有评论(0)