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. Django 配置MySQL数据库 mysql

    Django 配置MySQL数据库 在settings.py中配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # ...

  2. Web编译器Visual Studio扩展

    原文地址:https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler 一个Visual Studio扩 ...

  3. 我从HTML的meta中学到了什么

    meta meta中有这样几个常用属性:http-equiv,name,content,包括html5新增的charset. 注意:content属性用来存储meta信息的内容,所有的主流浏览器都支持 ...

  4. CMake学习笔记五-依赖库添加

    # # 项目名称 # SET(WIS_PROJECT_NAME EXAMPLE) # dependencies SET(DEPENDENCIES #依赖第三方库 ) #Qt模块 SET(QT_MODU ...

  5. 为数据计算提供强力引擎，阿里云文件存储HDFS v1.0公测发布

    在2019年3月的北京云栖峰会上,阿里云正式推出全球首个云原生HDFS存储服务—文件存储HDFS,为数据分析业务在云上提供可线性扩展的吞吐能力和免运维的快速弹性伸缩能力,降低用户TCO.阿里云文件存储 ...

  6. 1<<33这种写法是错的！！！

    1<<33不能这么写,1默认int类型,应该改为(long long)1<<33

  7. 高二小假期集训—D5

    刚调完了一个非常恶心的题(可能是我写的太恶心了),心累……先写会博客吧. 今天上午该完了考试的三道题,感觉第二道真的是个好题(学长说是经常会遇到的一类题……完了完了),看了一个小时std才看懂,写了篇 ...

  8. Mysql 锁表处理

    -- 查看正在被锁定的的表 show ; -- 查看进程号 show processlist; -- 杀掉进程 : -- 表级锁次数 show status like 'Table%'; +----- ...

  9. 洛谷P2709 小B的询问 莫队

    小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重复次数.小 ...

  10. Android教程 -06 Activity的生命周期

    本篇播客我们重点介绍下如下知识点: 程序启动原理 Activity生命周期 Activity销毁与创建 视频建议采用超清模式观看, 欢迎点击订阅我的优酷 程序启动原理 当用户从主界面点击程序图标时,系 ...