Vue和React中生命周期和钩子函数

在Vue中，生命周期和钩子函数是两个重要的概念。

通常在开发过程中，不了解这两个概念也可以完成基本的开发任务。

学习生命周期有两个目的：解决问题bug，对其他功能的完善和分析（时间节点）。

在Vue实例对象创建并完成Dom渲染过程中，不同时期会生成不同的事件，对应着不同的方法和回调函数。

以下是八个具体的过程：beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestory/destryed.

 

每一个过程的流程和具体的执行时间如下：

beforeCreate:function(){}
//组件实例化之前执行的函数

created:function(){}
//组件实例化完毕，但是页面没有显示

beforeMount:function(){}
//组件挂载前，页面还没有展示，但是虚拟的DOM已经配置

mounted:function(){}
//组件挂载后，这个方法执行后，页面显示

beforeUpdate:function(){}
//当页面操作后，组件更新前，页面没有显示，此时虚拟DOM已经挂载

updated:function(){}
//组件更新完毕，页面已经显示

beforeDestroy:function(){}
//组件销毁之前

destroyed:function(){}
//组件销毁之后

这八个基本的方法在Vue实例组件进行渲染的过程中不断执行，在代码调试过程中很重要。

2020-01-09 更新

生命周期函数对应组件的不同阶段，可以处理对应的数据和请求。通常，在组件首次加载后发出请求，组件更新之前和组件更新之后，避免大量修改状态，否则会造成内存泄漏；在组件销毁之前判断数据是否保存；在组件销毁之后可以清理定时器和事件监听。

VUE 的生命周期函数和 React 的生命周期函数大同小异，下面简单列举 React 的生命周期函数

constructor(props) {
    super(props);
    this.val = props.val;
    this.state = {
        isOpen: false
    };
}

componentWillMount() {
    // 服务器端处理
}

componentDidMount() {
    // 页面加载完成，可以发出异步请求
}

componentWillUpdate() {
    // 组件将要更新
}

componentDidMount() {
    // 组件已经更新
}

componentWillReceiveProps() {
    // 组件将要接受到props(即将废弃)
}

shouldComponentUpdate() {
    // 组件是否更新
}

componentWillUnmount() {
    // 组件即将卸载
}