vue的生命周期钩子与父子组件的生命周期详解

作为网站的作者，我可以为你提供有关vue的生命周期钩子与父子组件生命周期的详细攻略。

Vue的生命周期钩子

Vue组件有一个由一系列钩子组成的生命周期，每个钩子都允许我们在组件自身发生重要事件时执行自定义代码。

这些钩子可以分为创建、更新和销毁三个阶段。以下是这些钩子及其所在的阶段：

创建阶段

• beforeCreate
• created
• beforeMount

示例代码：

Vue.component('example-component', {
  beforeCreate: function () {
    console.log('beforeCreate - 组件实例刚被创建')
  },
  created: function () {
    console.log('created - 组件实例已经创建完成')
  },
  beforeMount: function () {
    console.log('beforeMount - 组件挂载之前')
  },
  template: '<div>这是一个示例组件</div>'
});

更新阶段

• beforeUpdate
• updated

示例代码：

Vue.component('example-component', {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate - 数据更新之前')
  },
  updated() {
    console.log('updated - 数据已更新')
  },
  template: '<div>{{ message }}</div>'
});

销毁阶段

• beforeDestroy
• destroyed

示例代码：

Vue.component('example-component', {
  beforeDestroy() {
    console.log('beforeDestroy - 组件销毁之前')
  },
  destroyed() {
    console.log('destroyed - 组件已经被销毁')
  },
  template: '<div>这是一个示例组件</div>'
});

父子组件的生命周期钩子

当父组件渲染时，它的每个子组件都会渲染并完成它们各自的生命周期。以下是子组件生命周期的钩子及其所属的阶段：

子组件的创建

• beforeCreate
• created
• beforeMount

示例代码：

Vue.component('parent-component', {
  template: `
    <div>
      <h1>父组件</h1>
      <child-component></child-component>
    </div>
  `
});

Vue.component('child-component', {
  beforeCreate() {
    console.log('child-component beforeCreate - 子组件实例刚被创建')
  },
  created() {
    console.log('child-component created - 子组件实例已经创建完成')
  },
  beforeMount() {
    console.log('child-component beforeMount - 子组件挂载之前')
  },
  template: '<div>子组件</div>'
});

子组件的更新

• beforeUpdate
• updated

示例代码：

Vue.component('parent-component', {
  template: `
    <div>
      <h1>父组件</h1>
      <child-component></child-component>
    </div>
  `
});

Vue.component('child-component', {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  beforeUpdate() {
    console.log('child-component beforeUpdate - 数据更新之前')
  },
  updated() {
    console.log('child-component updated - 数据已更新')
  },
  template: '<div>{{ message }}</div>'
});

子组件的销毁

• beforeDestroy
• destroyed

示例代码：

Vue.component('parent-component', {
  template: `
    <div>
      <h1>父组件</h1>
      <child-component></child-component>
    </div>
  `
});

Vue.component('child-component', {
  beforeDestroy() {
    console.log('child-component beforeDestroy - 子组件销毁之前')
  },
  destroyed() {
    console.log('child-component destroyed - 子组件已经被销毁')
  },
  template: '<div>子组件</div>'
});

以上就是Vue生命周期钩子和父子组件生命周期的详细说明。希望对你有所帮助。