学习vue时搞清楚生命周期可以帮助你知道什么时候在什么地方执行该执行的方法,话不多说上图:

复制下面代码可以在控制台更详细展示各个钩子的状态

<!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 : "小李同学就是我"

      },

       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 组件创建完毕,属性已经绑定但dom还未生成的状态===============》');

            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>

图解vue生命周期的更多相关文章

  1. Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）（2022/7/17）

    文章目录 1.Vue生命周期 1.1 概念 1.2 图解 2.钩子函数的用法说明 2.1 beforeCreate()和created()的详细讲述 2.1.1 方法说明 2.1.2 代码实例 2.1 ...

  2. vue生命周期的介绍

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

  3. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  4. 详解vue生命周期

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

  5. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

  6. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

  7. Vue生命周期，面试常见问题

    一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...

  8. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  9. 面试题之（vue生命周期）

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

随机推荐

  1. 447. Number of Boomerangs

    Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple of po ...

  2. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  3. Eclipse Pydev添加MySQLdb模块,Windows下安装MySQL-python

    1.首先确保Windows下已经安装Python.Eclipse并且Eclipse已经集成Pydev能成功运行Python 2.下载MySQL-python 地址:http://www.codegoo ...

  4. Docker安装入门 -- 应用镜像

    Docker安装入门 -- 应用镜像 WordPress  1.docker build -t csphere/wordpress:4.2 .  2.docker run -d -p 80:80 -- ...

  5. 与apk签名有关的那些概念与命令

    一.概念篇 1.消息摘要-Message Digest 消息摘要:在消息数据上,执行一个单向的hash函数,生成一个固定长度的hash值,这个Hash值就是消息摘要,也成为数字指纹. 消息摘要特点: ...

  6. centos 7 部署 open-falcon 0.2.0

    =============================================== 2017/12/06_第2次修改                       ccb_warlock 更 ...

  7. java基础->循环

    while循环 格式:   while(条件表达式) { // 条件表达式其实就是一个结果为boolean类型的代码 循环体; } 执行流程: 先判断条件表达式的值, 如果为true就执行循环体,执行 ...

  8. 使用git工具将项目上传到github

    注册github账号 https://github.com/ 安装git工具: https://git-for-windows.github.io/ 上面的准备工作完成后,现在开始操作. 一.进入gi ...

  9. SQLserver中小数点怎么自定义取的问题

    第一次写博客,正好我也在写作业的时候遇到了这个问题,所以就看看 我正在写T-SQL的代码!在经过计算后 结果的小数点多了几位,很烦躁,所以百度了一个方法"round(数字,保留几位小数),两 ...

  10. Excel Microsoft.Jet.OLEDB.4.0 外部数据库驱动程序中(1)的意外错误

    昨天更新系统的bug,据说是微软要搞事情啊 删除以下更新就行: win7                          KB4041678  KB4041681 SERVER 2008 R2 KB ...