vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、卸载等一系列过程，我们称这是vue的生命周期。

通俗的将就是vue实例从创建到销毁的过程，就是生命周期。

生命周期 钩子函数就是这些事件

beforecreat创建前状态，created创建完毕状态，beforemount挂载前状态，mounted挂载结束状态，beforeupdate更新前状态，updataed更新后状态，beforedestory销毁前状态，destory销毁后状态。

<!DOCTYPE html >
　　<html>
　　　　<head>
　　　　　　<div id='div1' v-bind:title="div_title">{{hello_message}}</div>
　　　　</head>
　　<body>
　　　　<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
　　　　<script>
　　　　　　var v1 = new Vue({
　　　　　　　　　　　　　　　　　　el: "#div1",
　　　　　　　　　　　　　　　　　　data: {
　　　　　　　　　　　　　　　　　　　　　　hello_message: "Hello, there welcome to VueJS world",
　　　　　　　　　　　　　　　　　　　　　　div_title: "This is my intro div",
　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　beforeCreate: function(){alert('Before Create');},

　　　　　　　　　　　　　　　　　　created: function(){alert('Created');},

　　　　　　　　　　　　　　　　　　beforeMount: function(){alert('Before Mount');},

　　　　　　　　　　　　　　　　　　mounted: function(){alert('Mounted');},

　　　　　　　　　　　　　　　　　　beforeUpdate: function(){alert('Before Update');},

　　　　　　　　　　　　　　　　　　updated: function(){alert('Updated');},

　　　　　　　　　　　　　　　　　　beforeDestroy: function(){alert('Before Destroy');},

　　　　　　　　　　　　　　　　　　destroyed: function(){alert('Destroyed');}});//To fire updatev1.$data.hello_message = "New message";
　　　　　　　　　　　　　　　　// This can be invoked to destroy the object, which will fire the destroy hook//v1.$destroy();
　　　　</script>
　　</body>
　　</html>

beforeCreate（新对象诞生）

　　Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问 。我们可以在这个钩子中插入我们的代码，在对象初始化之前执行。

Create（具有默认特性的对象,实例创建成功，此时 data 中的数据显示出来了）

　　在这个生命阶段，对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。

beforeMounted（数据中的 data 在模版中先占一个位置）

　　这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。

Mounted（模版中的 data 数据直接显示出来了）

　　一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。

beforeUpdate（更改已完成，但尚未准备好更新DOM）

　　在外部事件/用户输入beforeUpdate发生更改时，此钩子即 在反映原始DOM元素的更改之前被触发。

　　为了解决这个问题 beforeUpdated，我添加了下面的代码。它通过更新DOM来更改运行时中的hello_message。

　// To fire updatev1.$data.hello_message="New message";

Update（在DOM中呈现的更改）

　　然后，通过实际更新DOM对象并触发updated，屏幕上的变化得到呈现 。

　　数据更改导致的虚拟 DOM 重新渲染和打补丁

beforeDestroy（对象准备死掉）

　　在 vue 实例销毁之前调用，此时实例任然可用

　　就在Vue对象被破坏并从内存中释放之前， deforeDestroy 钩子被触发，并允许我们在其中处理我们的自定义代码。

　　为了激发这个钩子，我添加了下面的代码来销毁Vue对象。

//这可以被调用来销毁该对象，这将触发销毁钩v1.$ destroy（）;

Destroy（对象停止并从内存中删除）

　　在 vue 实例销毁之后调用，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

　　该 destroyed 钩子被成功运行销毁对象上调用。

附上官方生命周期详解图:

总结:我们可以使用生命周期钩子在Vue对象生命周期的不同阶段添加我们的自定义代码。它将帮助我们控制在DOM中创建对象时创建的流程，以及更新和删除对象。

关于 vue 生命周期 钩子函数 事件的更多相关文章

  1. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  2. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  3. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  4. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  5. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

  6. vue生命周期钩子函数详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...

  7. Vue生命周期钩子函数加载顺序的理解

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

  8. vue生命周期钩子函数

    <template> <div> <h2>this is from C.vue</h2> </div> </template> ...

  9. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

随机推荐

  1. Spring boot--控制器增强

    在Spring3.2中,新增了@ControllerAdvice注解.关于这个注解的官方说明https://docs.spring.io/spring-framework/docs/5.0.0.M1/ ...

  2. AudioToolbox.framework框架学习

    http://quding0308.iteye.com/blog/1596710 AudioFile AudioFileStream类 提供了一个接口,用来解析一个流音频文件. //创建一个new s ...

  3. c标签 if else c标签 总结

    [b]STL标签用法 关键字:JSTL标签.<c:choose>.<c:forEach>.<c:forTokens>.<c:if>.<c:impo ...

  4. SQL注入绕过的技巧总结

    sql注入在很早很早以前是很常见的一个漏洞.后来随着安全水平的提高,sql注入已经很少能够看到了.但是就在今天,还有很多网站带着sql注入漏洞在运行.稍微有点安全意识的朋友就应该懂得要做一下sql注入 ...

  5. [框架]eclipse搭建ssm框架 一 标签： eclipsetomcat框架 2017-03-25 21:28 1085人阅读 评论(

    虽然现在也做过一些项目,但是自己从头搭起来的框架几乎没有,所以这两天自己搭了一下ssm的框架,下面写一下框架的搭建过程.并且给出增删改查四条线来方便大家熟悉代码. 环境准备 maven3.2.3 ec ...

  6. 数组map用法总结

    数组中,map方法,指的是是数组的映射. map基本语法如下:function回调支持3个参数,第1个是遍历的数组内容:第2个是对应的数组索引,第3个是数组本身. map方法的作用不难理解,“映射”嘛 ...

  7. Vim学习与总结

    1. :w 后面可以加文件名 2. 使用hjkl 来移动光标,当然你也可以使用箭头.j就是向下的箭头,k是向上,h向左, l向右 3.  :help <command> → 显示相关命令的 ...

  8. 散列表(Hash Table)

    散列表(hash table): 也称为哈希表. 根据wikipedia的定义:是根据关键字(Key value)而直接访问在内存存储位置的数据结构.也就是说,它通过把键值通过一个函数的计算,映射到表 ...

  9. Libevent：5events相关

    Libevents的基本操作单元是event,每一个event代表了一些条件的集合,这些条件包括: 文件描述符已经准备好读或写 文件描述符正在变为就绪,准备好读或写(仅限于边沿触发) 超时事件 信号发 ...

  10. PHP程序连接Redis报read error on connection问题

    线上PHP程序动不动就报PHP Fatal error: Uncaught RedisException: read error on connection错误,就是连接Redis在那么1秒钟有问题, ...