前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。(里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读)

平时开发中，我真的不太使用生命周期相关的方法。但必须明确的是，生命周期在整个 vue 具有非常重要的作用，如果你了解它将对理解整个 vue 会更容易；同时在遇到问题时也能有个导向性的判断。

此篇简单说下生命周期的过程，以及方法调用。

生命周期的整个过程

借用 vue 官网的图，仔细全览下基本就对生命周期的过程有个粗略的认识了。

我这里没必要重复细说了，按我自己理解讲这个过程：

new 一个 Vue 实例
初始化 event($on、$off 等) 和 lifecycle
触发钩子 beforeCreate
初始化 inject、data、computed、watch、provide
触发钩子 created
判断 el 属性(是否调用 $mount，你在源码能看到两个 $mount 的声明)，判断 template 属性(决定渲染模板)
触发钩子 beforeMount
替换 el 标签内容，实现元素挂载
触发钩子 mounted
definedReactive 响应式的定义在初始化的时候已经完毕了，当数据更新，触发钩子 beforeUpdate 、 updated
销毁时，触发钩子 beforeDestroy
移除事件监听、绑定数据
销毁完， 触发钩子 destroyd

钩子触发顺序

这个例子，调用了所有生命周期的钩子，用来说明他们的执行顺序(注意 activated 和 deactivated 是 keepalive 专用的)：

直接看下图，当 created 时，开启一个 timer 定时器用来确认组件的销毁情况。

有什么细节问题

beforeCreate 和数据响应式

因为 beforeCreate 是最开始初始化的，数据响应和相关事件和监听在其后，所以有类似功能处理需要避免。

created 获取不到 dom 元素

它是指完成了数据观察、相关属性方法的计算，并没有把我们的模板替换到 html 上，不要试图在这个钩子里调用 dom 相关的 api。

如果你想获取整个客户端的高度的话，建议放在 mounted 中。

不要忘记移除掉定时器等

beforeDestroy 不是没有用，在这环节中，vue 的实例仍然有效，你可以移除定义的 timer ，以免引起不必要的错误。

总结

生命周期贯穿整个 vue 的设计思想，理解好它能写出让别人能更容易“看得懂的”代码，千万不能张冠李戴的乱用。

另外上面那张 vue 整个生命周期的图 ，正如官网所说，随着我们使用的深入，它的意义会越来越大。

关于我

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。

vue created 调用方法_vue 基础-生命周期 lifecycle 的执行顺序和作用相关推荐

vue created 调用方法_vue中的eventBus会产生内存泄漏吗
eventBus是在vue中经常用来解决跨组件消息传递的问题,但对它的使用要特别注意,否则会产生很严重的后果. 引入本文介绍了eventBus的实现原理,并介绍它如何在vue中使用,并举了一个具体的 ...
实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序生命周期钩子函数父组件与子组件执行顺序生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
vue created 调用方法_深入解析 Vue 的热更新原理，偷学尤大的秘籍？
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
vue中beforeupdate意思_VUE的生命周期之beforeMount、mounted、beforeUpdate、updated
释放双眼,带上耳机,听听看~! beforeMount:渲染前,被vue管理起来的dom在vue实例里还没完成渲染,所以就是还不能访问vue渲染的dom,平时项目中基本用不到,知道有这个是干什么的就行 ...
vue createApp()，mount()，生命周期钩子函数执行顺序
之前一直以为在调用createApp()时执行beforeCreate.created这两个钩子函数,在mount()时才执行beforeMount.mounted这两个钩子函数但实际上,在crea ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
软件工程管理之《系统开发方法与项目生命周期的矛盾冲突》
各位读者大家好,由于本文章是我在闲暇时间来迭代补充编辑的,并不是一次性编辑完成,如果影响大家的阅读感受,尽请大家谅解!!! >>第一章:项目管理者情况很高兴能与大家一起分享及探讨关于软 ...
Vue的系列之详解生命周期
生命周期介绍简单说就是一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期 vue的生命周期图 beforeCreate(创建前) beforeCreate(初始化页面前) 详情:实例初 ...

vue created 调用方法_vue 基础-生命周期 lifecycle 的执行顺序和作用

前言

生命周期的整个过程

钩子触发顺序

有什么细节问题

总结

关于我

vue created 调用方法_vue 基础-生命周期 lifecycle 的执行顺序和作用相关推荐

最新文章

热门文章