vue生命周期钩子

时间 2019-11-17

标签 vue 生命周期钩子繁體版

原文原文链接

转载自：https://segmentfault.com/a/1190000008010666?utm_source=tag-newestjavascript

https://segmentfault.com/a/1190000011381906?utm_source=tag-newestcss

https://segmentfault.com/a/1190000008570622?utm_source=tag-newesthtml

初始化过程：数据监听(data watcher[created])、模板编译(template->render函数)、将实例挂载到DOM（mount）、数据更新时更新DOM(update)vue

生命周期java

生命周期钩子chrome

beforeCreate
segmentfault

在 实例初始化以后，数据观测(data observer) 和 event/watcher 事件配置（未完成）以前被调用。

created：完成了 data 数据的初始化（数据和data属性的绑定），没有el选项后端

实例已经建立完成以后被调用。在这一步，实例已完成如下的配置： 数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMountapp

在挂载开始以前被调用：相关的 render 函数首次被调用。

mounteddom

el 被新建立的 vm.$el 替换，并 挂载到实例上，以后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 从新渲染和打补丁以前。你能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

因为数据更改致使的虚拟 DOM 从新渲染和打补丁，在这以后会调用该钩子。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 建立前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 建立完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

另外，在beforeMount中，咱们能发现el仍是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

1.created钩子函数和beforeMount间的生命周期

首先会判断对象是否有el选项。若是有的话就继续向下编译，若是没有el选项，则中止编译，也就意味着中止了生命周期，直到在该vue实例上调用vm.$mount(el)。

而后，看一下template参数选项的有无对生命周期的影响。
（1）.若是vue实例对象中有template参数选项，则将其做为模板编译成render函数。
（2）.若是没有template选项，则将外部HTML做为模板编译。
（3）.能够看到template中的模板优先级要高于outer HTML的优先级。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--html中修改的-->
    <h1>{{message + '这是在outer HTML中的'}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中修改的
    data: {
      message: 'Vue的生命周期'
    }
}）
</script>
</html>

执行后的结果能够看到在页面中显示的是：

那么将vue对象中template的选项注释掉后打印以下信息：

在vue对象中还有一个render函数，它是以createElement做为参数，而后作渲染操做，并且咱们能够直接嵌入JSX.

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'this is createElement')
    }
})

能够看到页面中渲染的是：

因此综合排名优先级：
render函数选项 > template选项 > outer HTML.

2.beforeMount和mounted 钩子函数间的生命周期

　　能够看到此时是给vue实例对象添加$el成员，而且用$el替换掉el属性所指的DOM。由于在以前console中打印的结果能够看到beforeMount以前el上仍是undefined。

3. 与update相关的钩子

在chrome的console中输入：

app.message= 'yes !! I do';

data里的值被修改后，将会触发update的操做。

与destroy 相关的钩子

咱们在console里执行下命令对 vue实例进行销毁。销毁完成后，咱们再从新改变message的值，vue再也不对此动做进行响应了。可是原先生成的dom元素还存在，能够这么理解，执行了destroy操做，后续就再也不受vue控制了。

app.$destroy();

总结

beforecreate : 举个栗子：能够在这加个loading事件
created ：在这结束loading（有data了），还作一些初始化，实现函数自执行
mounted ：在这里发起后端请求，拿回数据，配合路由钩子作一些事情
beforeDestroy：你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容