vue生命周期以及钩子函数

最新推荐文章于 2025-03-16 08:52:39 发布

原创最新推荐文章于 2025-03-16 08:52:39 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文深入解析Vue.js的生命周期，包括初始化、运行中和销毁三个阶段的钩子函数，如beforeCreate、created、beforeMount、mounted等，阐述它们的执行时机及用途。

Vue生命周期

概念

组件或者实例从创建到销毁的一系列过程叫做生命周期;
一个组件或者实例的什么周期都是从new开始的;
实例化之后，内部就会做一些初始化事件与生命周期相关的配置

钩子函数

vue在整个生命周期中提供了一些函数，叫做钩子函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行（在生命周期的某一个时刻进行触发）

生命周期的钩子函数大致分为三个阶段

初始化阶段：beforeCreate（） created（可以获取数据） beforeMount （render）  mounted

运行中阶段：beforeUpdate updated （mouted ==> change data ）

销毁阶段：  beforeDestroy destroyed

下面介绍以下各个钩子函数

先创建一个组件

<body>
     <div id="app"> 
        <my-component></my-component>
    </div>
  	<template id="my-component">
        <div>
            <h1 id="title">{{msg}}</h1> 
            <input type="text" v-model='msg'>
        </div>
    </template>
</body>
<script>
	Vue.component("my-component",{
    	template:"#my-component",
        data(){
        	return {
            	msg:"hello"
            }
        })
     new Vue().$mount("#app");
</script>

初始化阶段的钩子函数

beforeCreate(){
	console.log(this.msg,document.getElementById("title"))
}
  这个钩子函数初始化阶段就会触发执行
  数据获取不到，并且真实dom也获取不到

created(){
	console.log(this.msg,document.getElementById("title"))
    this.timer = setInterval(() => {
          this.msg += "哈"
     }, 3000);
}
初始化阶段就会触发执行
created钩子函数代表数据已经挂载完毕，但是真实dom节点还是没有渲染出来。
通常在这个钩子函数里面，我们可以进行初始化的一些事件绑定与进行ajax异步请求
 注意：在这个钩子函数里面，如果同步的更改数据的话，是不会影响到运行时钩子函数执行

beforeMount(){
	console.log(this.msg,document.getElementById("title"))
}
初始化阶段就会触发执行
 接下来的过程，就是组件或者实例去查找各自的模板，将其编译成虚拟dom
 beforeMount代表真实dom马上要被渲染出来了，但是页面中还没有生成真实dom
 beforeMount与created钩子函数用法基本一致，也可以进行初始化事件绑定与ajax请求

mounted(){
	console.log(this.msg,document.getElementById("title")
}
初始化阶段就会触发执行
mounted钩子函数是初始化阶段的最后一个钩子函数
数据已经挂载完毕了，并且真实的dom元素也已经生成好了
一般可以进行一些实例化操作 --> 拖拽

运行中阶段的钩子函数

beforeUpdate(){
	console.log("beforeUpdate...",document.getElementById("title").innerHTML,this.msg)
}
初始化的时候不会执行
注意：前提是dom已经挂载完毕之后，再去修改数据的时候，这个钩子函数才会执行
beforeUpdate是dom获取的数据内容是更新之前的内容

updated(){
	console.log("updated...",document.getElementById("title").innerHTML,this.msg)
}
初始化的时候不会执行
updated是dom获取的数据内容是更新之后的内容
数据改变，内部生成新的虚拟dom树，进行diff比较，再去重新渲染真实dom

销毁阶段的钩子函数

beforeDestroy(){
	//定时器及时清掉
    clearInterval(this.timer)
}
当组件销毁的时候，才会触发此方法
这个钩子函数代表销毁之前，可以做一些善后的操作，例如清除定时器相关的事情。

destroyed(){
	console.log("destroyed...")
}
当组件销毁的时候，才会触发此方法
组件的dom结构还是存在的，只不过这个组件已经没有活力了。
失去了双向数据的绑定效果，也不能监听数据的改变。