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

　　

 

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

　　

　　

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

示例：

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

　　整个流程各阶段：

  • beforeCreate

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

  • created

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

  • beforeMount

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

  • mounted

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

  • beforeUpdate

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

  • updated

　　　由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

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

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

  • beforeDestroy

　　　实例销毁之前调用。在这一步，实例仍然完全可用。

  • destroyed

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

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

 

vue2.0 之 生命周期的更多相关文章

  1. Vue2.0 探索之路——生命周期和钩子函数的一些理解

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

  2. vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  3. Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿

    在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...

  4. Vue2.0关于生命周期和钩子函数

    Vue生命周期简介:   Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下:   代码验证: <!DOCTYPE html> <html> <head& ...

  5. vue2.0组件生命周期探讨

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue2.0的生命周期

    生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程, 我们称这是Vue的生命周期.通俗说就是Vue实 ...

  7. Vue2.0 探索之路——生命周期和钩子函数

    beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...

  8. 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  9. 你还不知道Vue的生命周期吗？带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

随机推荐

  1. PixelShuffle

  2. leetcode-mid-math-29. Divide Two Integers-NO

    mycode   91.28% class Solution(object): def divide(self, dividend, divisor): """ :typ ...

  3. oracle备份和还原

    用exp命令即可完成,但要看具体的备份方式. 1. 导出一个完整数据库 exp system/manager file=bible_db log=dible_db full=y 2. 导出数据库定义而 ...

  4. python正则表达式 分割字符串

    使用或 标准的正则表达式有小括号,但是python的没有 # -*- coding: utf-8 -*- import sys import re import sys reload(sys) sys ...

  5. hdu 6219 Empty Convex Polygons (凸包)

    给你n个点,求面积最大的凸多边形,使得这个凸多边形没有内点. 考虑求凸包的graham算法,需要找到左下角的点,再进行极角排序后按顺序扫点,所以先枚举左下角的点. 这个过程中,如果遇到内点,就需要把这 ...

  6. yarn.lock 是干什么的

    概述 今天本地运行尤大的vue-hackernews-2.0,使用 yarn 命令安装,报错提示 node 版本必须大于7小于9,如下所示: error upath@1.0.4: The engine ...

  7. Python 笔试集（4）：True + True == ？

    目录 目录 前文列表 面试题True Ture 布尔值 布尔类型是特殊的整数类型 前文列表 Python 笔试集:什么时候 i = i + 1 并不等于 i += 1? Python 笔试集(1):关 ...

  8. 二：flask-debug模式详解

    debug模式的情况下可以抛出详细异常信息 新建一个脚本并运行 访问 此时是非debug模式,如果运行的时候代码报错了,是不会提示详细错误的,只会报服务器内部错误 开启debug模式,可以查看到详细错 ...

  9. div动画旋转效果

    animation: spin 10s linear infinite;

  10. oracle 日期格式操作

    原文转自:http://hi.baidu.com/gzfvb/blog/item/5062b7f008eb70a8a50f5206.html   Oracle日期格式:   to_date(" ...