链接地址：https://segmentfault.com/a/1190000011381906

首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉：

可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

先来一波代码，各位复制在浏览器中运行，打开console查看就行了：

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

    <h1>{{message}}</h1>

  </div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

      message: 'Vue的生命周期'

    },

    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>

</html>

　　

运行后打开console可以看到打印出来内容如

可以看到一个vue实例在创建过程中调用的几个生命周期钩子。

Vue的生命周期（在其他地方看到一份非常好又详细的详解）的更多相关文章

  1. vue学习指南：第三篇(详细) - vue的生命周期

    今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

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

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

  4. 8.vue的生命周期

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

  5. 如何解释vue的生命周期才能令面试官满意？

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  6. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

  7. vue的生命周期的理解

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

  8. vue笔记-生命周期

    生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. vue 关于生命周期

    序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...

随机推荐

  1. NOTIFY - 生成一个通知

    SYNOPSIS NOTIFY name DESCRIPTION 描述 NOTIFY 命令向当前数据库中所有执行过 LISTEN name, 正在监听特定通知条件的前端应用发送一个通知事件. 传递给前 ...

  2. mysql 练习笔记

    从一个数据表中找出连续n条满足条件的记录 例子demo 从数据表中找出连续三条或者三次以上分数超过80分的记录 MariaDB [testdatabase]> select * from cla ...

  3. 安装php-solr扩展

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  4. CSP2019 前 随感

    因为博主并没有任何的 oi 水平.文化课水平以及作文水平,下面的东西都是对辞藻和古诗词的堆砌. 不知不觉又到了新一年的 noip 了. 好像是去年的双十一的晚上,noip 考挂的我绝望地写了 bzoj ...

  5. CCF201412-2 Z字形扫描 java（100分）

    试题编号: 201412-2 试题名称: Z字形扫描 时间限制: 2.0s 内存限制: 256.0MB 问题描述: 问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag ...

  6. 047：创建和映射ORM模型

    创建ORM模型: ORM 模型一般都是放在 app 的 models.py 文件中.每个 app 都可以拥有自己的模型.并且如果这个模型想要映射到数据库中,那么这个 app 必须要放在 setting ...

  7. ie下,首页打开页面非常慢

    手里的项目,登录页面在IE下首次进入页面非常的慢,应该不只是登录页面,因为项目我也是半路接手的.开始以为是js的问题,后台把所有的代码都去掉,就一个空白的页面,然后慢慢的试试,最后才发现是一个CSS文 ...

  8. python-登录保持

     cookies.Session import requests url1="http://127.0.0.1:5000/login" url2="http://127. ...

  9. mobx状态管理快速入门

    1.mobx状态管理   安装: creact-react-app mobx  

  10. LCA【Tarjan】

    首先,我们先来了解LCA. LCA 是树上两个点最近的公共祖先. 比如说,在如图的树中,3与4的公共祖先有“2”,“1”,但最近的祖先是“2”. 显然,暴力可以做O(n),但是我们希望更快. 现在,有 ...