Vue.js 中父子组件生命周期函数详解

Vue.js 是一款流行的前端框架，它采用组件化的方式构建应用程序。在 Vue.js 中，组件是通过父子关系组合而成的，每个组件都有自己的生命周期函数。本文将详细介绍 Vue.js 中父子组件的生命周期函数，以及它们的指导意义和示例代码。

父组件生命周期函数

beforeCreate

在父组件被创建之前调用，此时组件的属性和方法都还没有被初始化，因此在此时不应该访问组件的属性和方法。此函数的主要作用是在组件被创建之前进行一些全局配置。

export default {
  beforeCreate() {
    console.log('父组件 beforeCreate')
  }
}

created

在父组件被创建之后立即调用，此时组件的属性和方法已经被初始化，但还没有被挂载到 DOM 上。此函数的主要作用是进行一些组件的初始化操作，例如请求数据等。

export default {
  created() {
    console.log('父组件 created')
  }
}

beforeMount

在父组件被挂载到 DOM 上之前调用，此时组件已经被初始化，但还没有被渲染到页面上。此函数的主要作用是在组件被挂载到 DOM 上之前进行一些操作，例如修改组件的属性或方法。

export default {
  beforeMount() {
    console.log('父组件 beforeMount')
  }
}

mounted

在父组件被挂载到 DOM 上之后立即调用，此时组件已经被渲染到页面上。此函数的主要作用是进行一些需要 DOM 元素的操作，例如绑定事件等。

export default {
  mounted() {
    console.log('父组件 mounted')
  }
}

beforeUpdate

在父组件更新之前调用，此时组件的数据已经改变，但还没有被重新渲染到页面上。此函数的主要作用是在组件被更新之前进行一些操作，例如保存一些数据等。

export default {
  beforeUpdate() {
    console.log('父组件 beforeUpdate')
  }
}

updated

在父组件更新之后立即调用，此时组件已经被重新渲染到页面上。此函数的主要作用是进行一些需要 DOM 元素的操作，例如重新绑定事件等。

export default {
  updated() {
    console.log('父组件 updated')
  }
}

beforeDestroy

在父组件被销毁之前调用，此时组件还没有被销毁，但已经被卸载。此函数的主要作用是在组件被销毁之前进行一些清理操作，例如取消订阅事件等。

export default {
  beforeDestroy() {
    console.log('父组件 beforeDestroy')
  }
}

destroyed

在父组件被销毁之后调用，此时组件已经被销毁。此函数的主要作用是进行一些清理操作，例如释放一些资源等。

export default {
  destroyed() {
    console.log('父组件 destroyed')
  }
}

子组件生命周期函数

beforeCreate

子组件的 beforeCreate 生命周期函数和父组件的 beforeCreate 生命周期函数一样，此函数的主要作用是在组件被创建之前进行一些全局配置。

export default {
  beforeCreate() {
    console.log('子组件 beforeCreate')
  }
}

created

子组件的 created 生命周期函数和父组件的 created 生命周期函数一样，此函数的主要作用是进行一些组件的初始化操作，例如请求数据等。

export default {
  created() {
    console.log('子组件 created')
  }
}

beforeMount

子组件的 beforeMount 生命周期函数和父组件的 beforeMount 生命周期函数一样，此函数的主要作用是在组件被挂载到 DOM 上之前进行一些操作，例如修改组件的属性或方法。

export default {
  beforeMount() {
    console.log('子组件 beforeMount')
  }
}

mounted

子组件的 mounted 生命周期函数和父组件的 mounted 生命周期函数一样，此函数的主要作用是进行一些需要 DOM 元素的操作，例如绑定事件等。

export default {
  mounted() {
    console.log('子组件 mounted')
  }
}

beforeUpdate

子组件的 beforeUpdate 生命周期函数和父组件的 beforeUpdate 生命周期函数一样，此函数的主要作用是在组件被更新之前进行一些操作，例如保存一些数据等。

export default {
  beforeUpdate() {
    console.log('子组件 beforeUpdate')
  }
}

updated

子组件的 updated 生命周期函数和父组件的 updated 生命周期函数一样，此函数的主要作用是进行一些需要 DOM 元素的操作，例如重新绑定事件等。

export default {
  updated() {
    console.log('子组件 updated')
  }
}

beforeDestroy

子组件的 beforeDestroy 生命周期函数和父组件的 beforeDestroy 生命周期函数一样，此函数的主要作用是在组件被销毁之前进行一些清理操作，例如取消订阅事件等。

export default {
  beforeDestroy() {
    console.log('子组件 beforeDestroy')
  }
}

destroyed

子组件的 destroyed 生命周期函数和父组件的 destroyed 生命周期函数一样，此函数的主要作用是进行一些清理操作，例如释放一些资源等。

export default {
  destroyed() {
    console.log('子组件 destroyed')
  }
}

父子组件生命周期函数的调用顺序

在父子组件中，生命周期函数的调用顺序是有一定规律的。在父组件的生命周期函数中，会先调用子组件的生命周期函数，然后再调用自己的生命周期函数；在子组件的生命周期函数中，会先调用自己的生命周期函数，然后再调用父组件的生命周期函数。具体的调用顺序如下：

1. 父组件 beforeCreate
2. 子组件 beforeCreate
3. 子组件 created
4. 父组件 created
5. 子组件 beforeMount
6. 子组件 mounted
7. 父组件 beforeMount
8. 父组件 mounted
9. 父组件 beforeUpdate
10. 子组件 beforeUpdate
11. 子组件 updated
12. 父组件 updated
13. 父组件 beforeDestroy
14. 子组件 beforeDestroy
15. 子组件 destroyed
16. 父组件 destroyed

示例代码

下面是一个父子组件的示例代码，其中父组件的模板中包含了一个子组件：

// www.javascriptcn.com code example
<template>
  <div>
    <h1>{{ title }}</h1>
    <child :message="message"></child>
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    components: {
      Child
    },
    data() {
      return {
        title: '父组件',
        message: 'Hello World!'
      }
    },
    beforeCreate() {
      console.log('父组件 beforeCreate')
    },
    created() {
      console.log('父组件 created')
    },
    beforeMount() {
      console.log('父组件 beforeMount')
    },
    mounted() {
      console.log('父组件 mounted')
    },
    beforeUpdate() {
      console.log('父组件 beforeUpdate')
    },
    updated() {
      console.log('父组件 updated')
    },
    beforeDestroy() {
      console.log('父组件 beforeDestroy')
    },
    destroyed() {
      console.log('父组件 destroyed')
    }
  }
</script>

下面是子组件的示例代码：

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    },
    beforeCreate() {
      console.log('子组件 beforeCreate')
    },
    created() {
      console.log('子组件 created')
    },
    beforeMount() {
      console.log('子组件 beforeMount')
    },
    mounted() {
      console.log('子组件 mounted')
    },
    beforeUpdate() {
      console.log('子组件 beforeUpdate')
    },
    updated() {
      console.log('子组件 updated')
    },
    beforeDestroy() {
      console.log('子组件 beforeDestroy')
    },
    destroyed() {
      console.log('子组件 destroyed')
    }
  }
</script>

在控制台中运行以上代码，可以看到父子组件生命周期函数的调用顺序和结果。在实际开发中，可以根据需要在生命周期函数中进行一些操作，例如请求数据、绑定事件、清理资源等。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d155c4a941bf71342d83ed