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. RestFul 与 RPC

    原文地址:https://blog.csdn.net/u014590757/article/details/80233901 RPC.REST API深入理解 一:RPC RPC 即远程过程调用(Re ...

  2. Python2.7用sys.stdout.write实现打印刷新

    如何能在控制台实现在一行中显示进度的信息呢,就像使用pip安装时的进度那样. 如果用print则会打印成多行,下面这个小技巧可以在一行中打印: import time import sys if __ ...

  3. Codeforces Round #395 (Div. 2) A. Taymyr is calling you【数论/最小公倍数】

    A. Taymyr is calling you time limit per test 1 second memory limit per test 256 megabytes input stan ...

  4. 怎么在 CentOS 6 上配置私有 NPM 仓库？

    Sinopia 是一个简单易用的私有 NPM 仓库服务器.在 CentOS 6 上安装时,遇到如下报错(Node 版本 6.9.1) #error This version of node/NAN/v ...

  5. qt获取本机用户名

    //获取用户名 QString getUserName() { #if 1 QStringList envVariables; envVariables << "USERNAME ...

  6. 【JZOJ4746】【NOIP2016提高A组模拟9.3】树塔狂想曲

    题目描述 相信大家都在长训班学过树塔问题,题目很简单求最大化一个三角形数塔从上往下走的路径和.走的规则是:(i,j)号点只能走向(i+1,j)或者(i+1,j+1).如下图是一个数塔,映射到该数塔上行 ...

  7. git day01笔记 常用操作命令 快照 推送 拉取

    ansible 批量在远程主机上执行命令或者脚本 git   做版本控制的一个工具 ## git操作命令: 工作区:当前编辑的区域 缓存区:add 之后的区域 本地仓库:commit之后的区域 远程仓 ...

  8. poj2195&&hdu1533 最小费用流

    这题也可以用km做,我写的代码km比费用流快很多. 最小费用流: #include<stdio.h> #include<string.h> #include<math.h ...

  9. python爬虫：一些爬虫常用的技巧

    1.基本抓取网页 get方法 import urllib2 url = "http://www.baidu.com" response = urllib2.urlopen(url) ...

  10. Inno Setup生成桌面快捷方式

    在做项目的时候,需要打包成exe安装包.先前使用的是vs来打包,生成了setup.exe 和 *.msi的安装文件,不过也算顺利. 后因为要求采取 Inno Setup来打包程序,其中遇到个创建快捷方 ...