vue生命周期简介

生命周期的钩子 LifeCycle hooks

上面已经能够清晰的看到vue2.0都包含了哪些生命周期的钩子函数~~

那么 执行顺序以及什么时候执行，我们上代码来看~~~

生命周期钩子函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

<div id="app">

    <p>{{message}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            message: "hello gaoxin!!"

        },

        beforeCreate: function () {

            console.group("beforeCreate  创建实例之前===========");

            console.log("el: " + this.$el); // undefined

            console.log("data: " + this.$data); // undefined

            console.log("message: " + this.message);

        },

        created: function () {

            console.group("Created:  创建实例完成===========");

            console.log("el: " + this.$el); // undefined

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        beforeMount: function () {

            console.group("beforeMount  挂载前状态==========");

            console.log("el: " + this.$el); // 已被初始化

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        mounted: function () {

            console.group("Mounted  挂载结束状态=============");

            console.log("el: " + this.$el); // 已被初始化

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        beforeUpdate: function () {

            console.group("beforeUpdate  更新前状态=========");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        updated: function () {

            console.group("Updated  更新完成状态");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        beforeDestroy: function () {

            console.group("beforeDestroy  实例销毁之前");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        destroyed: function () {

            console.group("Destoryed  实例销毁之后");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        }

    })

</script>

</body>

</html>

生命周期钩子函数

create 和 mounted 相关

执行上面代码，可以看到：

　　beforecreated ：el 和 data 并未初始化

　　created：完成了data数据的初始化 el 没有

　　beforeMount：完成了el 和 data的初始化

　　mounted：完成了挂载

也就是说~挂载前的状态是虚拟DOM技术，先把坑站住了~挂载之后才真正的把值渲染进去~

update 相关

我们在浏览器console里执行命令：

　　app.message = "hello~"

我们就出发了update相关的钩子函数~也就是说data里的值被修改会出发update的操作~

destroy 相关

我们在浏览器console里执行命令：

　　app.$destroy();

触发了destroy相关的钩子函数，也就是说组件被销毁~

更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~

vue生命周期简介的更多相关文章

  1. Vue生命周期简介和钩子函数

    钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字.或者说你想在出生阶段去约炮,也是不行的.组件也是一样,每个阶段它的内部构造是不一样的.所以一般 ...

  2. 详解vue生命周期

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

  3. Vue生命周期钩子---2

    vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

  4. 什么是vue生命周期和生命周期钩子函数？

    原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...

  5. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  6. Android之Activity生命周期简介

    概述 有图有真相,所以先上图: 上图是从Android官网截下的Activity的生命周期流程图,结构非常清晰,它描述了Activity在其生命周期中所有可能发生的情况以及发生的先后顺序,下面就将结合 ...

  7. vue生命周期的介绍

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

  8. vue 生命周期

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

  9. 关于vue生命周期

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

随机推荐

  1. 编写优秀Bug报告的艺术及案例分析

    编写优秀Bug报告的艺术及案例分析 ---Rex Black原著<Fine art of writing a good bug report > ---Kiki翻译于2005/5/28 前 ...

  2. javascrpt基础入门

    JavaScript 是一门脚本语言,同HTML语言一样,需要浏览器或者JavaScript解释器,解释执行. 1. 第一个JavaScript程序: <html> <body> ...

  3. 多媒体基础知识之PCM数据《 转》

    多媒体基础知识之PCM数据 1.什么是PCM音频数据 PCM(Pulse Code Modulation)也被称为脉冲编码调制.PCM音频数据是未经压缩的音频采样数据裸流,它是由模拟信号经过采样.量化 ...

  4. spring-mvc.xml与spring-mybatis.xml配置文件中命名空间问题

    首先贴出配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...

  5. li直接1px 像素的原因

    1.由于空白节点(多由于Enter造成),li不换行就可以解决问题. Internet Explorer会忽略节点之间生成的空白节点,其它浏览器不会忽略(可以通过检测节点类型,过滤子节点) 2.完美解 ...

  6. 10：处理 json

    json 通用的数据类型, 所有的语言都认识.json 是字符串.key-value 必须使用双引号1. loads() 和 dumps() 的使用 json.loads() 将 json 字符串转换 ...

  7. Linux 中的定时处理 cron服务

    cron服务 在LINUX中,周期执行的任务一般由cron这个守护进程来处理 当安装完操作系统后默认会安装此服务工具并且会自动启动crond,该进程会每分钟定期检查是否有要执行的任务,若有则执行. c ...

  8. 使用py2exe转换python文件为可执行程序

    py2exe可以将python脚本转换成在Windows上的可独立执行.exe程序的工具.可以让Python脚本在没有安装python工具的Windows系统上运行,方便脚本共享. 操作环境 pyth ...

  9. 构造函数，C++内存管理,内存泄漏定位

    构造函数 1.构造顺序 虚基类构造函数,基类构造函数,类对象构造函数,自己的构造函数 2.必须使用初始化列表 (1) 引用成员,常量成员: (2) 基类没默认构造函数(自己重载覆盖了), (3)类对象 ...

  10. ANg-基础概念

    分类 机器学习可以分为两类:监督学习(Supervised Learning)和无监督学习(Unsupervised Learning) 监督学习 Supervised Learning 监督学习是从 ...