vue2.0 之生命周期

时间 2019-11-13

标签 vue2.0 vue 生命周期繁體版

原文原文链接

1、vue1.x与vue2.x生命周期的变化区别及含义表（图表摘自网络）javascript

2、vue2.x生命周期图和各阶段具体含义 html

beforecreated：el 和 data 并未初始化
　　created:完成了 data 数据的初始化，el没有
　　beforeMount：完成了 el 和 data 初始化
　　mounted ：完成挂载vue

示例：java

<!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>

View Code

　　整个流程各阶段：git

beforeCreate

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

created

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

beforeMount

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

mounted

　　 el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。app

beforeUpdate

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

updated

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

　　　当这个钩子被调用时，组件 DOM 已经更新，因此你如今能够执行依赖于 DOM 的操做。然而在大多数状况下，你应该避免在此期间更改状态，由于这可能会致使更新无限循环。

　　　该钩子在服务器端渲染期间不被调用。

beforeDestroy

　　　实例销毁以前调用。在这一步，实例仍然彻底可用。

destroyed

　　　Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

注：结合以前的MVVM_ada https://github.com/136shine/MVVM_ada ，理解了vue 的MVVM原理，能更好地理解生命周期

1. vue2.0生命周期
2. Vue2.0生命周期
3. 浅谈vue2.0生命周期
4. 详解Vue2.0生命周期
5. Vue2.0学习——生命周期
6. 探究Vue2.0生命周期
7. Vue2.0七——生命周期
8. Vue2.0生命周期和钩子函数
9. php生命周期、Laravel生命周期、Yii2生命周期、ThinkPHP生命周期
10. Vue生命周期
更多相关文章...
• SVN 生命周期 - SVN 教程
• Rust 生命周期 - RUST 教程
• Docker 清理命令
• 使用Rxjava计算圆周率

vue2.0 之 生命周期

vue2.0 之生命周期