vue生命周期、钩子理解

在vue文档中，对生命周期部分有如下视图：

看起来有些复杂，对于一些名词甚至还不是很熟悉，所以在查找后，我整理如下：

new vue	创建vue实例
init events & lifecycle	开始初始化
beforeCreate	组件刚被创建，组建属性计算之前，如data属性等
init injections & reactivity	通过依赖注入导入依赖项
created	组件实例创建完成，属性已绑定，此时DOM还未生成
el属性	检查vue配置，即new Vue{}里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用vm.$mount()
template	检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对象的outerHTML（即整个#app DOM对象，包括<div id=”app” >和</div>标签）都作为被填充对象替换掉填充区域
beforeMount	模板编译、挂载之前
create vm.$el and replace “el” with it	编译，并替换了被绑定元素
mounted	编译、挂载
Before update	组件更新之前
updated	组件更新之后
destroy	当vm.$destroy()被调用，开始拆卸组件和监听器，生命周期终结

vue生命周期、钩子理解相关推荐

Vue生命周期钩子理解
#Vue生命周期钩子理解 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset= ...
Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
Vue 生命周期钩子解读
文章目录 vue 生命周期钩子声明周期图示解析生命周期钩子函数 beforeCreate #created #beforeMount #mounted #beforeUpdate #updated ...
-Vue生命周期钩子
1.1-Vue生命周期钩子介绍 vue生命周期钩子官方文档: 官方文档图解介绍:生命周期图示官方文档详细介绍:vue生命周期钩子介绍 ==vue生命周期钩子介绍 : vue从创建到销毁过程中,会执行 ...
Vue生命周期钩子函数的使用以及应用场景
文章目录前言钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
前端面试 vue生命周期钩子是如何实现的？理解vue中模板编译原理？
生命周期钩子在内部会被vue维护成一个数组(vue 内部有一个方法mergeOption)和全局的生命周期合并最终转换成数组,当执行到具体流程时会执行钩子(发布订阅模式),callHook来实现调用. ...
Vue生命周期钩子的理解
组件从创建到销毁的一系列过程叫做组件的声明周期. vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行.(在生命周期的某一个时刻进行触发). 组件 ...
Vue生命周期(个人理解)
描述:今天进度到生命周期 other-teacher只讲了两个项目使用到的生命周期剩下的自己扩展,哎,自己来了兴趣,为啥,自己第一次面试的时候记得很清楚.面试官:"简单说一下你对vue生命 ...
Vue生命周期钩子剖析（共12个钩子）
生命周期示意图: 生命周期及其钩子函数理解生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例:在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新 ...

vue生命周期、钩子理解

vue生命周期、钩子理解相关推荐

最新文章

热门文章