生命周期钩子

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

注释:

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

vue笔记-生命周期的更多相关文章

  1. vue笔记 - 生命周期第二次学习与理解

    对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...

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

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

  3. Vue2.0源码阅读笔记--生命周期

    一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...

  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 关于生命周期

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

  9. Vue：生命周期

    一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...

随机推荐

  1. Linux NTP时间同步服务

    NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.它的用途是把计算机的时钟同步到世界协调时UTC,其精度在局域网内可达0.1ms,在互联网 ...

  2. Java【第六篇】面向对象基础

    类和对象 面向对象的概念 面向过程 核心是过程二字,过程指的是解决问题的步骤,设计一条流水线,机械式的思维方式: 面向对象 核心就是对象二字,对象就是特征与技能的结合体,利用“类”和“对象”来创建各种 ...

  3. MySQL 创建、删除、显示数据库、数据表

    1 创建.删除.显示数据库 -- 创建数据库 create database student_db character set utf8 collate utf8_general_ci; -- 删除数 ...

  4. Jenkins-在windows上安装及其部署

    Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.其主要功能:1.持续的软件版本发布/测试项目. ...

  5. 纯js Ajax 请求

    var XMLHttpReq; function createXMLHttpRequest() { if(window.ActiveXObject ) { try { XMLHttpReq = new ...

  6. MyBatis使用注意事项

    目录 1. 使用何种映射器配置 2. 对象生命周期和作用域 SqlSessionFactoryBuilder SqlSessionFactory SqlSession 映射器实例(Mapper Ins ...

  7. Latex "Error: File ended while scanning use of \@xdblarge"

    Latex 编译时出现 Error: File ended while scanning use of \@xdblarge" 是因为少了一个 }...

  8. [物理学与PDEs]第2章第1节 理想流体力学方程组 1.3 理想流体力学方程组的数学结构

    1.  局部音速 $c$: $c^2=\cfrac{\p p}{\p \rho}>0$. 2.  将理想流体力学方程组 $$\beex \bea \rho\cfrac{\p {\bf u}}{\ ...

  9. SSH框架之hibernate《三》

    Hibernate03     一.多表设计         1.1多表设计的总则             问题:我们为什么要学习多表映射?             答:                ...

  10. C#压缩解压文件

    using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...