关于 vue 生命周期 钩子函数 事件
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中创建对象时创建的流程,以及更新和删除对象。
最新文章
- AFNetworking图片上传
- Python读取文件内容并将内容插入到SSDB中
- thymeleaf常用标签
- js循环的总结
- Windows 7下配置JDK环境变量,JAVA环境变量配置,Tomcat服务器的使用
- SQLContext、HiveContext自定义函数注册
- 课下必做MyCP
- resin4.0.25 安装配置 及结合eclipse开发
- item 6: 当auto推导出一个不想要的类型时,使用显式类型初始化的语法
- AD软件原理图封装过程(即由原理图转换到PCB)
- 链接PDO
- 9.C#知识点:线程初识及Thread初识(一)
- 深入理解Java虚拟机--阅读笔记二
- JAVA中如何将一个json形式的字符串转为json对象
- linux中echo命令详解
- tcpdump-根据IP查看程序与服务都用了哪些端口
- Discuz的sc 和tc版本有什么区别
- 【OC语法快览】二、存取方法
- A memory map of an object
- leetcode 之Remove Duplicates from Sorted List(17)