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. How to CORS enable ArcGIS Server 10.2.1 to Access REST Services without Using proxy.ashx

    http://gis.stackexchange.com/questions/86206/how-to-cors-enable-arcgis-server-10-2-1-to-access-rest- ...

  2. centos限制用户使用部分命令

    参考网:https://access.redhat.com/solutions/65822# 环境 Red Hat Enterprise Linux 5 Red Hat Enterprise Linu ...

  3. [Python]实践：实现探测Web服务质量

    来源:Python 自动化运维 技术与最佳实践 HTTP服务是最流行的互联网应用之一,服务质量的好坏关系到用户体验以及网站的运营服务水平,最常用的有两个标准:1.服务的可用性,比是否处于正常提供服务状 ...

  4. strcore.cpp(156) 内存泄漏

    vs搞了一个小工具涉及到线程 每次执行完退出的时候都会报 strcore.cpp(156) 的内存泄漏 原因是在线程内使用了CString 类型的传递参数 如果没有正常释放会报上面的错误.

  5. iOS多语言

    https://blog.csdn.net/huangmindong/article/details/53464334 App多语言,字符串统一放在 Localizable.strings 文件里. ...

  6. 【377】only one element in a tuple

    Recently I am doing the assignment of COMP9021. It is too difficult and it is about the Knight and K ...

  7. App.js实现使用js开发app的应用，此文是中文文档

    在阅读前,在此说明下,本人英文一直不好,所以该文档是借助翻译工具翻译的,阅读起来可能有点不好,请各位谅解,哪位大神有标准的中文文档请分享下 Github下载地址:https://github.com/ ...

  8. python使用xlrd 操作Excel读写

    此文章非本人 一.安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装,前提是已经安装了python 环境. 二.使用介绍 1.导入模块 i ...

  9. Oracle数据库备份/导入工具

    expdp和impdp常用于ORACLE数据库的导入导出. expdp导出数据库 1.root用户创建用于impdp/expdp导入导出的目录: # mkdir -p /home/dmpdata # ...

  10. python技巧 显示对象的所有属性

    python技巧 显示对象的所有属性for attr in dir(ad):... print attr+":"+str(getattr(ad,attr))