博主:小猫娃来啦
文章核心:vue生命周期的传统写法和setup语法糖写法
语法糖的设计目标是简化组件编写,将逻辑和生命周期函数整合到一个地方。它使用了基于编译时静态分析的方式,通过识别函数调用来确定逻辑的执行时机。
常见的就8个:
beforeCreate: 组件实例被创建之前调用,此时组件的 data 和 methods 等属性都还未初始化。
created: 组件实例已经创建完成后调用,可以访问组件的 data 和 methods 属性。
beforeMount: 组件挂载前调用,此时模板编译已完成,但尚未将其挂载到页面上。
mounted: 组件挂载后调用,此时组件已在页面上渲染出来。
beforeUpdate: 数据更新前调用,可用于在数据更新之前获取更新前的状态。
updated: 数据更新后调用,可用于操作 DOM 或执行其他的更新操作。
beforeUnmount: 组件销毁前调用,可以在这里进行一些清理操作,比如清除定时器等。
unmounted: 组件销毁后调用,此时组件已完全被销毁,所有的事件监听和子组件都已被移除。
.
在 Vue 3 中,由于引入了 Composition API,一些生命周期钩子函数的名称发生了改变,并且在使用 语法糖时,不再直接使用这些钩子函数,而是使用Composition API 提供的函数来实现类似的功能。
以下是 Vue 3 中常用的生命周期钩子函数及其对应的 Composition API 函数:
beforeCreate: 在 Vue 3 中,可以使用 setup 函数中的代码来替代 beforeCreate 钩子函数。
created: 在 Vue 3 中,可以使用 setup 函数中的代码来替代 created 钩子函数。
beforeMount: 在 Vue 3 中,可以使用 onBeforeMount 函数来替代 beforeMount 钩子函数。
mounted: 在 Vue 3 中,可以使用 onMounted 函数来替代 mounted 钩子函数。
beforeUpdate: 在 Vue 3 中,可以使用 onBeforeUpdate 函数来替代 beforeUpdate 钩子函数。
updated: 在 Vue 3 中,可以使用 onUpdated 函数来替代 updated 钩子函数。
beforeUnmount: 在 Vue 3 中,可以使用 onBeforeUnmount 函数来替代 beforeUnmount
钩子函数。unmounted: 在 Vue 3 中,可以使用 onUnmounted 函数来替代 unmounted 钩子函数。
beforeCreate
和 created
这两个钩子函数在 Vue 3 中被封装进了 语法糖中。原因是为了简化代码和提高可读性。
在 Vue 2 中,我们需要显式地编写 beforeCreate
和 created
钩子函数来处理相关的逻辑。这两个钩子函数分别在组件实例被创建之前和创建之后执行。
而在 Vue 3 中,通过使用 语法糖,不再需要显式地定义这两个钩子函数。相反,我们可以在 setup 函数中设置数据、方法和其他逻辑,这些逻辑会在组件创建之前和创建之后自动执行。
使用
<script>
export default {
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
}
};
script>
语法糖合并了这两个hook
<script setup>
script>
<script>
export default {
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
}
};
script>
使用 和 Composition API 函数:
<script setup>
import { onBeforeMount, onMounted } from 'vue';
onBeforeMount(() => {
console.log('beforeMount');
});
onMounted(() => {
console.log('mounted');
});
script>
<script>
export default {
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
}
};
script>
使用 和 Composition API 函数:
<script setup>
import { onBeforeUpdate, onUpdated } from 'vue';
onBeforeUpdate(() => {
console.log('beforeUpdate');
});
onUpdated(() => {
console.log('updated');
});
script>
<script>
export default {
beforeUnmount() {
console.log('beforeUnmount');
},
unmounted() {
console.log('unmounted');
}
};
script>
使用 和 Composition API 函数:
<script setup>
import { onBeforeUnmount, onUnmounted } from 'vue';
onBeforeUnmount(() => {
console.log('beforeUnmount');
});
onUnmounted(() => {
console.log('unmounted');
});
script>