标注图+部分举例聊聊Vue生命周期

Aceyclee 发布于2019-08-23 12:36 / 2045人阅读

摘要：天王盖地虎钩子事件得到的结果是小总结实例创建完成后，我们能读取到数据的值，但是还没生成，挂载属性还不存在。此时的阶段解读为挂载完毕阶段我们再打印下此时看看钩子事件得到的结果是可见，已经成功渲染成里面对应的值天王盖地虎了。

“你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。”

现在项目中遇到了，好好回头总结一波Vue生命周期，以后用到的时候再来翻翻。

啥叫Vue生命周期？

每个 Vue 实例在被创建时都要经过一系列的初始化过程。

例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。

我们称 这一系列的过程 就是Vue的生命周期。

通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。

啥也不说，先来个干货

这是对于Vue生命周期，官网给的那张图的标注图，图片网上看到的，我觉得标注地很nice，建议一步步仔细看完图片，然后把图片自己悄悄保存下来，对照着图片的内容看第二部分的举例说明。

我相信程序员看代码比看文字更容易理解

对照着上图标注的内容，我们一个钩子一个钩子地举例说明。

1.beforeCreate

实例初始化之后、创建实例之前的执行的钩子事件。
如下例子：


{{test}}

得到的结果是：

小总结：创建实例之前，数据观察和事件配置都没好准备好。也就是数据也没有、DOM也没生成。

2.created

实例创建完成后执行的钩子
在上一段代码例子中，我们再来console一下。


{{test}}

得到的结果是：

小总结：实例创建完成后，我们能读取到数据data的值，但是DOM还没生成，挂载属性el还不存在。

3.beforeMount

将编译完成的html挂载到对应的虚拟DOM时触发的钩子
此时页面并没有内容。
即此阶段解读为: 即将挂载
我们打印下此时的$el

beforeMount() {
            console.log("beforeMount钩子事件：");
            console.log(this.$el);
        }

得到的结果是：

小总结：此时的el不再是undefined,成功关联到我们指定的dom节点。但是此时的{{test}}还没有成功渲染成data中的数据，页面没有内容。

PS：相关的render函数首次被调用。

4.mounted

编译好的html挂载到页面完成后所执行的事件钩子函数。

此时的阶段解读为：挂载完毕阶段

我们再打印下此时$el看看：

mounted() {
            console.log("mounted钩子事件：");
            console.log(this.$el);
        }

得到的结果是：

可见， {{test}}已经成功渲染成data里面test对应的值“天王盖地虎”了。

小总结：此时编译好的HTML已经挂载到了页面上，页面上已经渲染出了数据。一般会利用这个钩子函数做一些ajax请求获取数据进行数据初始化。
PS：mounted在整个实例中只执行一次。

5.beforeUpdate

小总结：当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。

6.updated

小总结：此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容。

PS:
1、该钩子在服务器端渲染期间不被调用。
2、应该避免在此期间更改状态，因为这可能会导致更新无限循环。

7.beforeDestroy

小总结：调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。

8.destroyed

小总结：成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

话在最后

其实还有三个生命周期钩子没列出来：activated、deactivated、errorCaptured。这三个大家遇到了自行了解哈,暂且这样吧。

GPU云服务器云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98812.html

关于Vue实例的生命周期created和mounted的区别

摘要：通俗说就是实例从创建到销毁的过程，就是生命周期。在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://www.linganmin.cn 最近刚写了一个手机在线播放的H5电影站：...

Integ 2019-08-20 14:46 评论0 收藏0
关于Vue实例的生命周期created和mounted的区别

摘要：通俗说就是实例从创建到销毁的过程，就是生命周期。在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://www.linganmin.cn 最近刚写了一个手机在线播放的H5电影站：...

baukh789 2019-08-01 16:26 评论0 收藏0
在没有DOM操作的日子里，我是怎么熬过来的（中）

摘要：于是，闰土顺应呼声，在这个凛冽的寒冬早晨，将中篇热文滚烫呈上。本系列文章还没有结束，下篇，也可能是终结篇，即将来袭作者闰土少年链接来源掘金著作权归作者所有。 showImg(https://segmentfault.com/img/bVZsm6?w=669&h=445); 前言继上篇推送之后，在掘金、segmentfault、简书、博客园等平台上迅速收到了不俗的反馈，大部分网友都留言...

CoXie 2019-08-21 17:51 评论0 收藏0