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. vue移动端项目

    用vue mint-ui  jquery-weui写了一个移动端demo 技术栈 vue2.0 vue-router axios mint-ui jquery-weui webpack 页面截图 最后 ...

  2. QT获取主机名称

    //获取主机名 QString localHost = QHostInfo::localHostName();

  3. Oracle 定义变量总结

    首先,当在cmd里办入scott密码提示错误时,可以这样改一下,scott的解锁命令是: 以system用户登录:cmdsqlplus system/tigertigeralter user scot ...

  4. nodeJs koa-generator脚手架

    koa-generator 脚手架 全局安装:cnpm install -g koa-generator 查看版本:koa2 --version 创建项目:koa2 project 默认的是用jade ...

  5. poj2125 最小点权覆盖集

    题意:有一张图,对于每个点,有出边和入边,现在目的是删除改图的所有边,对于每个点,删除出边的花费Wi-,删除入边的花费Wi+,现在的目的求删去所有边后的花费最小. 建图方法:对于每个点i,拆点为i,i ...

  6. Directx11教程(3) 一个最基本D3D应用程序(1)

    原文:Directx11教程(3) 一个最基本D3D应用程序(1)       在前一篇教程程序代码的基础上,这次我们将增加2个类: InputClass,键盘处理的代码将放在这个类里面,Graphi ...

  7. Android实战：手把手实现“捧腹网”APP（一）-----捧腹网网页分析、数据获取

    Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...

  8. nodeJs学习-08 cookie、session

    http-无状态的:两次访问之间,无区别,cookie可解决 cookie:在浏览器保存一些数据,每次请求都会带过来: 弊端:可以查看修改,并不安全.大小有限(4K) 读取--cookie-parse ...

  9. 洛谷P3324 [SDOI2015]星际战争

    题目:洛谷P3324 [SDOI2015]星际战争 思路: 类似<导弹防御塔>,因为题目保证有解,花费时间小于最终答案时一定无法消灭所有敌人,只要花费时间大于等于最终答案都可以消灭所有敌人 ...

  10. HTML5入门指南

    1.HTML5到底是什么? HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联 ...