Vue的生命周期详解及业务场景应用

原创

喵喵侠

修改于 2024-07-30 21:46:25

1161

修改于 2024-07-30 21:46:25

大家好，我是喵喵侠。Vue.js是一个渐进式JavaScript框架，用于构建用户界面。为了更好地管理组件的创建、更新和销毁，Vue提供了一系列的生命周期钩子函数。这些钩子函数让我们能够在组件的不同阶段执行特定的操作，从而实现更复杂和高效的业务逻辑管理。在Vue.js的项目开发过程中，经常会用到各种生命周期钩子函数，合理的使用对应的钩子，可以有效的进行业务功能开发。下面我将为你介绍Vue.js的生命周期，以及具体业务场景的实际应用。

1 Vue的生命周期概念

Vue的生命周期是指从组件实例创建到销毁的整个过程，包括初始化、挂载、更新和销毁四个主要阶段。在每个阶段，Vue都会触发特定的生命周期钩子函数，允许开发者在这些钩子中执行自定义逻辑。

下面可以用一张图，来很直观的看到生命周期的运行全过程：

英文不好的同学，可以看下面的翻译中文图解：

2 Vue的生命周期钩子

beforeCreate：实例初始化之后，数据观测(data observer)和事件(event/watcher)配置之前被调用。在这个阶段，无法访问data、computed、methods等属性。
created：实例创建完成后被调用。在这个阶段，实例已经完成了数据观测、属性和方法的运算，事件/事件回调的配置。不过，挂载阶段尚未开始，$el属性还不可用。
beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。在这个阶段，组件还没有被挂载到DOM中。
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。在这个阶段，组件已经被挂载到DOM中，$el属性已经可用。
beforeUpdate：当数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。在这个阶段，可以进一步地更改状态，不会触发重渲染过程。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。在这个阶段，组件DOM已经更新，因此可以执行依赖于DOM的操作。
beforeDestroy：在实例销毁之前调用。在这个阶段，实例仍然完全可用。
destroyed：Vue实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
activated：keep-alive组件激活时调用。此钩子在组件被从缓存中激活时调用。
deactivated：keep-alive组件停用时调用。此钩子在组件被缓存时调用。
errorCaptured：当捕获一个来自子孙组件的错误时被调用。这个钩子可以用来捕获和处理错误。

3 业务场景中的生命周期钩子应用

初始化数据和依赖资源

在业务场景中，初始化数据是一个常见需求。我们可以在created钩子中进行数据的初始化，因为此时数据观测已经完成，实例已经可以访问data、computed和methods等属性。

created() {
    this.fetchInitialData();
},
methods: {
    fetchInitialData() {
        // 执行异步操作获取数据
        axios.get('/api/data').then(response => {
            this.data = response.data;
        });
    }
}

如果需要在created钩子中操作DOM，可以使用this.$nextTick来确保在DOM更新后执行。

created() {
    this.fetchInitialData();
    this.$nextTick(() => {
        this.initializePlugin();
    });
},
methods: {
    initializePlugin() {
        // 初始化DOM相关的插件
        new Plugin(this.$el);
    }
}

DOM操作

在需要直接操作DOM的场景下，可以在mounted钩子中进行，因为此时组件已经挂载到DOM中，$el属性可用。

mounted() {
    this.initializeCarousel();
},
methods: {
    initializeCarousel() {
        // 初始化轮播图插件
        new Carousel(this.$el.querySelector('.carousel'));
    }
}

数据变化时的副作用处理

当数据变化时需要进行一些副作用处理，可以在updated钩子中进行。但需要注意避免在updated中进行可能引发再次更新的数据变更操作，以避免无限循环。

updated() {
    this.handleDOMChanges();
},
methods: {
    handleDOMChanges() {
        // 处理DOM更新后的操作
        console.log('DOM updated');
    }
}

组件销毁时清理资源

在组件销毁时，需要清理定时器、取消订阅事件或断开WebSocket连接。以下是一个具体的业务场景，例如一个实时通话页面的定时器和事件监听器清理。

data() {
    return {
        callTimer: null
    };
},
created() {
    this.startCallTimer();
    window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
    clearInterval(this.callTimer);
    window.removeEventListener('resize', this.handleResize);
},
methods: {
    startCallTimer() {
        this.callTimer = setInterval(() => {
            this.updateCallDuration();
        }, 1000);
    },
    handleResize() {
        // 处理窗口调整大小
        console.log('Window resized');
    }
}

keep-alive组件的激活和停用

activated和deactivated钩子主要用于<keep-alive>组件，用于处理在不同的Tab切换时的数据和状态恢复。

activated() {
    this.refreshData();
},
deactivated() {
    this.saveScrollPosition();
},
methods: {
    refreshData() {
        // 刷新数据
        console.log('Component activated');
    },
    saveScrollPosition() {
        // 保存滚动位置
        console.log('Component deactivated');
    }
}

错误捕获和处理

errorCaptured钩子用于捕获和处理子组件中的错误，尤其在复杂应用中非常有用。

errorCaptured(err, vm, info) {
    console.error('Error captured:', err, info);
    // 发送错误信息到监控服务
    sendErrorReport(err, info);
    // 返回 false 以阻止错误向上传播
    return false;
}

4 容易忽视的细节

避免在**beforeCreate**和**created**中访问DOM：在这些钩子中，组件还未挂载到DOM上，因此不能进行DOM操作，当然你可以使用this.$nextTick()来操作。
谨慎使用**beforeUpdate**和**updated**钩子：避免在这些钩子中直接更改数据，因为这可能会导致无限循环更新。
异步操作的清理：在组件销毁时，确保清理所有的异步操作，以避免内存泄漏或其他潜在问题。
生命周期钩子的执行顺序：理解钩子的执行顺序有助于编写更加清晰和合理的代码。例如，如果你需要在组件挂载前进行一些数据准备工作，可以在beforeMount中执行，而不是在created中。