1.定义
从vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期
生命周期钩子 = 生命周期函数 = 生命周期事件
每个vue应用都是通过vue函数创建一个新的vue实例开始的:
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
});
在上面的例子中,app
就是一个 Vue 实例,它绑定了一个 message
数据属性和一个 reverseMessage
方法。当 message
的值发生改变或者 reverseMessage
方法被调用时,Vue 会自动更新相关的 DOM。
DOM,全称 Document Object Model(文档对象模型),是一种用于表示和操作 HTML 和 XML 文档的标准接口。DOM 定义了一套标准的属性、方法和事件,用于访问和修改文档中的内容和结构。
在网页开发中,DOM 主要用于以下目的:
-
表示文档结构:DOM 把 HTML 或 XML 文档看作一棵树,其中每个节点代表一个元素、文本或注释。根节点通常是文档的
<html>
或<xml>
标签,而子节点可以是其下的各种标签、文本和属性。 -
访问和修改内容:DOM 提供了多种方法来访问和修改文档中的元素,如
getElementById()
,getElementsByClassName()
,getElementsByTagName()
等,以及节点的innerHTML
和textContent
属性。 -
处理事件:DOM 允许开发者为文档中的元素添加事件监听器,以响应用户的操作,如点击、拖动或键盘输入。
-
创建和删除元素:DOM 支持创建新的节点并将其插入文档中,或删除现有的节点,从而动态地改变页面的内容和布局。
-
样式和属性操作:可以通过 DOM 访问和修改元素的样式和属性,实现 CSS 样式的动态调整。
在 JavaScript 中,DOM 被广泛用于动态网页编程,使网页能够根据用户的交互或来自服务器的数据实时更新。
2生命周期函数
beforeCreate(){};
这是我们遇到的第一个生命周期函数,表示实例完全被创建起来之前,会执行它;
注意:在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有初始化;
created(){};
data和methods中的数据都已经初始化了,可以使用他们的数据了;
beforement(){};
模版已经在内存中编辑完成了,但是尚未把模板渲染到页面中;
mounted(){};
内存中的模版已经真实的挂载到了页面中,用户可以看的到相关数据了;
它是实例创建完的最后一个函数,当执行完mounted就表示,实例已经被完全创建好了,此时如果没有其他的操作,这个实例就静静地躺在内存中一动不动了;此时组件已经脱离了创建阶段,进入了运行阶段;
beforeUpdate(){};
这时候,我们的界面还没有跟新,但是数据已经发生了更新;页面尚未和最新的数据保持同步;
updated(){};
页面和data数据已经保持同步了;
销毁过程:
beforeDestroy(){};实例身上所有的data和methods,以及过滤器,指令都处于可用状态,还没有真正执行销毁过程;
destroyed,实例身上所有的data和methods,以及过滤器,指令都已经不可用,真正执行了销毁过程;