浅谈Vue.js 1.x 和 2.x 实例的生命周期

浅谈Vue.js 1.x 和 2.x 实例的生命周期

什么是Vue.js生命周期？

在Vue.js中，组件在创建，挂载，更新，销毁等过程中，会触发一系列的生命周期函数，这些函数被称为Vue.js的生命周期函数。

Vue.js 1.x生命周期

Vue.js 1.x版本的生命周期图如下：

graph TD
A(created) --> B(beforeCompile)
B(beforeCompile) --> C(compiled)
C(compiled) --> D(ready)
D(ready) --> E(beforeDestroy)
E(beforeDestroy) --> F(destroyed)

1. created：组件被创建时调用，此时组件的属性等信息还未挂载到DOM中。

Vue.component('my-component', {
  created: function () {
    console.log('my-component created')
  }
})

1. beforeCompile：生命周期钩子，在模板编译开始前调用。此时已经可以访问到组件的模板和数据对象。

Vue.component('my-component', {
  beforeCompile: function () {
    console.log('my-component beforeCompile')
  }
})

1. compiled：生命周期钩子，在模板编译结束后调用。在此时网页中的HTML已经生成。

Vue.component('my-component', {
  compiled: function () {
    console.log('my-component compiled')
  }
})

1. ready：组件挂载到DOM中时触发。

Vue.component('my-component', {
  ready: function () {
    console.log('my-component ready')
  }
})

1. beforeDestroy：组件销毁时调用，此时组件的属性等信息还未被销毁。

Vue.component('my-component', {
  beforeDestroy: function () {
    console.log('my-component beforeDestroy')
  }
})

1. destroyed：组件完全销毁后触发。

Vue.component('my-component', {
  destroyed: function () {
    console.log('my-component destroyed')
  }
})

Vue.js 2.x生命周期

Vue.js 2.x版本的生命周期图如下：

graph TD
A(created) --> B(beforeMount)
B(beforeMount) --> C(mounted)
C(mounted) --> D(beforeUpdate)
D(beforeUpdate) --> E(updated)
E(updated) --> F(beforeDestroy)
F(beforeDestroy) --> G(destroyed)

1. created：和Vue.js 1.x版本一样，在组件被创建时调用，此时组件的属性等信息还未挂载到DOM中。

Vue.component('my-component', {
  created: function () {
    console.log('my-component created')
  }
})

1. beforeMount：开始挂载模板时调用，此时DOM节点还未生成。

Vue.component('my-component', {
  beforeMount: function () {
    console.log('my-component beforeMount')
  }
})

1. mounted：模板挂载结束时调用。此时组件DOM已经生成。

Vue.component('my-component', {
  mounted: function () {
    console.log('my-component mounted')
  }
})

1. beforeUpdate：状态更新前调用，此时组件内部修改数据。

Vue.component('my-component', {
  beforeUpdate: function () {
    console.log('my-component beforeUpdate')
  }
})

1. updated：状态更新后调用，此时组件已经更新完成。

Vue.component('my-component', {
  updated: function () {
    console.log('my-component updated')
  }
})

1. beforeDestroy：销毁前调用，此时组件还未销毁。

Vue.component('my-component', {
  beforeDestroy: function () {
    console.log('my-component beforeDestroy')
  }
})

1. destroyed：销毁后调用，此时组件已经销毁完成。

Vue.component('my-component', {
  destroyed: function () {
    console.log('my-component destroyed')
  }
})

示例说明

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World'
      }
    },
    created() {
      console.log('created')
    },
    mounted() {
      console.log('mounted')
    },
    updated() {
      console.log('updated')
    },
    destroyed() {
      console.log('destroyed')
    }
  }
</script>

在该示例中，组件被创建时，created函数被调用，此时组件的属性等信息还未挂载到DOM中。组件挂载到DOM中时，mounted函数被调用。更新后，updated函数被调用。当组件被销毁时，destroyed函数被调用。

<template>
  <div v-show="show">{{ message }}</div>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        message: 'Hello World'
      }
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    }
  }
</script>

在该示例中，beforeUpdate函数在组件数据改变更新前被调用，此时组件内部修改数据。updated函数在组件数据更新后被调用。