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

时间 2019-12-12

标签标注部分举例聊聊 vue 生命周期繁體版

原文原文链接

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

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

啥叫Vue生命周期？

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

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

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

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

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

啥也不说，先来个干货

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

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

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

1.beforeCreate

实例初始化以后、建立实例以前的执行的钩子事件。
以下例子：程序员

<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            test: '天王盖地虎'
        },
        beforeCreate() {
            console.log('beforeCreate钩子事件：');
            console.log($this.data);
            console.log($this.el);
        }
    })
</script>
</body>

获得的结果是：ajax

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

2.created

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

<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            test: '天王盖地虎'
        },
        created() {
            console.log('created钩子事件：');
            console.log(this.$data);
            console.log(this.$el);
        }
    })
</script>
</body>

获得的结果是：
函数

小总结：实例建立完成后，咱们能读取到数据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:
一、该钩子在服务器端渲染期间不被调用。
二、应该避免在此期间更改状态，由于这可能会致使更新无限循环。

7.beforeDestroy

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

8.destroyed

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

话在最后

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