Vue学习之Vue的生命周期详细解释
Vue学习之Vue的生命周期详细解释
概览
这里把Vue的官网贴出来:Vue的生命周期钩子
Vue组件的生命周期可以分为以下八个阶段:
-
beforeCreate
:组件实例刚被创建,属性和方法还未初始化,不能访问到data、props、computed等数据。 -
created
:组件实例创建完成,属性和方法已经初始化,但是DOM还未渲染出来。可以访问到data、props、computed等数据,并进行一些初始化操作。 -
beforeMount
:组件将要被挂载到页面上,此时DOM还未渲染出来。 -
mounted
:组件已经被挂载到页面上,此时DOM已经渲染出来,可以进行一些DOM操作和数据请求等操作。 -
beforeUpdate
:组件更新之前被调用,此时DOM还未被更新。 -
updated
:组件更新完毕后被调用,此时DOM已经被更新,可以进行一些DOM操作和数据请求等操作。 -
beforeDestroy
:组件将要被销毁,此时组件还可以访问到data、props、computed等数据,可以进行一些清理操作。 -
destroyed
:组件已经被销毁,此时组件已经无法访问到data、props、computed等数据。
在每个生命周期阶段,Vue提供了对应的钩子函数,程序员可以在这些钩子函数中编写代码来处理相应的操作。同时,在每个生命周期阶段,程序员可以通过访问组件实例来获取和操作相应的数据和方法。
详细解释每个生命周期的应用
Vue 组件的生命周期可以分为8个阶段,程序员可以在每个阶段执行一些特定的操作。这里详细介绍一下每个阶段的具体说明、可以获取到的 API 以及程序员可以做的事情。
beforeCreate(创建前)
beforeCreate(创建前) 在组件实例化之前被调用,此时程序员可以获取到组件的配置对象(options),但是无法访问到组件的数据和方法。此时的组件还没有初始化完成,因此也没有 DOM 元素。在这个阶段,程序员可以做一些初始化工作,例如加载外部数据、初始化事件等操作。 可以获取到的 API:
-
this.$options
:访问组件的配置对象。 -
程序员可以做的事情:
-
加载外部数据。
-
初始化事件。
-
created(创建后)
created(创建后) 在组件实例化完成后被立即调用,此时程序员可以访问到组件的数据和方法,但是无法访问到 DOM 元素。此时的组件还没有被挂载到页面上。在这个阶段,程序员可以做一些组件初始化的工作,例如对数据进行操作、访问服务器等操作。 可以获取到的 API:
-
this
:访问组件的数据和方法。 -
程序员可以做的事情:
-
对数据进行操作。
-
访问服务器。
-
beforeMount(挂载前)
beforeMount(挂载前) 在组件被挂载到页面之前调用,此时程序员可以访问到组件的数据和方法,也可以访问到 DOM 元素。在这个阶段,程序员可以对组件进行一些初始化操作,例如修改 DOM 元素的样式、添加事件监听器等操作。 可以获取到的 API:
-
this
:访问组件的数据和方法。 -
this.$el
:访问组件的 DOM 元素。 -
程序员可以做的事情:
-
修改 DOM 元素的样式。
-
添加事件监听器。
-
mounted(挂载后)
mounted(挂载后) 在组件被挂载到页面之后调用,此时程序员可以访问到组件的数据和方法,也可以访问到 DOM 元素。在这个阶段,程序员可以进行一些需要访问 DOM 元素的操作,例如获取 DOM 元素的宽度和高度、添加第三方库等操作。 可以获取到的 API:
-
this
:访问组件的数据和方法。 -
this.$el
:访问组件的 DOM 元素。 -
程序员可以做的事情:
-
获取 DOM 元素的宽度和高度。
-
添加第三方库。
-
beforeUpdate(更新前)
beforeUpdate(更新前) 在组件更新之前调用,此时程序员可以访问到组件的数据和方法,也可以访问到 DOM 元素。在这个阶段,程序员可以进行一些数据准备工作,例如计算需要更新的数据、清空某些数据等操作。 可以获取到的 API:
-
this
:访问组件的数据和方法。 -
this.$el
:访问组件的 DOM 元素。 -
程序员可以做的事情:
-
计算需要更新的数据。
-
清空某些数据。
-
updated(更新后)
updated(更新后) 在组件更新之后调用,此时程序员可以访问到组件的数据和方法,也可以访问到 DOM 元素。在这个阶段,程序员可以进行一些 DOM 操作,例如修改 DOM 元素的样式、添加事件监听器等操作。 可以获取到的 API:
-
this
:访问组件的数据和方法。 -
this.$el
:访问组件的 DOM 元素。 -
程序员可以做的事情:
-
修改 DOM 元素的样式。
-
添加事件监听器。
-
注意点:更新事件(beforeUpdate
以及updated
)可以重复触发的
获取更新前后的dom元素
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">修改消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
updated() {
console.log('组件更新完成');
const el = this.$el; // 获取更新后的 DOM 元素
const instance = this; // 获取更新后的组件实例
// 可以在这里做一些操作,例如获取更新后的计算属性值、操作子组件等
},
methods: {
changeMessage() {
this.message = 'Hello, World!';
}
}
}
</script>
在 updated
钩子函数中,我们可以通过 this.$el
获取更新后的 DOM 元素,通过 this
获取更新后的组件实例,并在这里做一些操作,例如获取更新后的计算属性值、操作子组件等。需要注意的是,updated
钩子函数只有在组件的 VNode 更新之后才会被调用,所以在此之前,我们无法获取到更新后的信息。
类似更新的dom元素类似的方法:$nextTick
n e x t T i c k 方法常常用于在 D O M 更新后执行某些操作,例如获取更新后的 D O M 元素或在更新后设置焦点。 nextTick 方法常常用于在 DOM 更新后执行某些操作,例如获取更新后的 DOM 元素或在更新后设置焦点。 nextTick方法常常用于在DOM更新后执行某些操作,例如获取更新后的DOM元素或在更新后设置焦点。nextTick 方法是异步执行的,因此可以保证在 DOM 更新完成后执行回调函数。
<template>
<div>
<h1 ref="title">{{ message }}</h1>
<button @click="changeMessage">修改消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
methods: {
changeMessage() {
this.message = 'Hello, World!';
this.$nextTick(() => {
console.log(this.$refs.title.innerText); // "Hello, World!"
this.$refs.title.focus(); // 设置标题元素的焦点
});
}
}
}
</script>
在上面的代码中,我们在 changeMessage
方法中修改了 message
的值,并通过 $nextTick
方法在 DOM 更新完成后获取了更新后的标题元素并设置了其焦点。
类似更新的dom元素类似的方法:$watch
$watch
方法常常用于监听数据的变化,并在数据变化时执行某些操作。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">修改消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
watch: {
message(newVal, oldVal) {
console.log(`message 从 ${oldVal} 变为 ${newVal}`);
}
},
methods: {
changeMessage() {
this.message = 'Hello, World!';
}
}
}
</script>
在上面的代码中,我们通过 $watch
方法监听了 message
的变化,并在 message 变化时打印了变化前后的值。
beforeDestroy(销毁前)
beforeDestroy(销毁前) 在组件实例销毁之前调用,此时程序员可以访问到组件的数据和方法,也可以访问到 DOM 元素。在这个阶段,程序员可以进行一些清理工作,例如取消事件监听器、清除定时器等操作。 可以获取到的 API:
-
this
:访问组件的数据和方法。 -
this.$el
:访问组件的 DOM 元素。 程序员可以做的事情: -
取消事件监听器。
-
清除定时器。
destroyed(销毁后)
destroyed(销毁后) 在组件实例销毁之后调用,此时程序员无法访问到组件的数据和方法,也无法访问到 DOM 元素。在这个阶段,程序员可以进行一些清理工作,例如释放内存、取消网络请求等操作。
-
可以获取到的 API:无
-
程序员可以做的事情:
-
释放内存。
-
取消网络请求。
-
代码示例
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">修改消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
beforeCreate() {
console.log('组件被创建前');
},
created() {
console.log('组件被创建后');
},
beforeMount() {
console.log('组件被挂载前');
},
mounted() {
console.log('组件被挂载后');
},
beforeUpdate() {
console.log('组件更新前');
},
updated() {
console.log('组件更新后');
},
beforeDestroy() {
console.log('组件销毁前');
},
destroyed() {
console.log('组件销毁后');
},
methods: {
changeMessage() {
this.message = 'Hello, World!';
}
}
}
</script>
在上面的代码中,我们定义了一个简单的组件,包含一个按钮和一个消息。在组件的生命周期中,我们通过 console.log()
输出了不同阶段的信息。 此外,我们还定义了一个 changeMessage()
方法,用于修改消息。在该方法中,我们更改了组件的数据,并在页面上实时更新了消息。
更多推荐
所有评论(0)