Vue.js 从零开始：生命周期

生命周期介绍

在一开始建立Vue的实体，然後挂载到#app就算是已经在使用元件，而这一连串的建立到被销毁，都有他的生命周期。

Vue本身就是以很多元件所组成的概念，举例来说最外层是一个app元件，里面有Banner、Footer、Main的子元件，当我在首页切换页面时，需要切换Main子元件内容，就必须卸载、重新生成，这个过程就会触发生命周期。

Vue 生命周期图

周期图分为三阶段：

• 实体建立阶段
  beforeCreate:Vue实体建立，状态事件还没初始化。
  created:资料建立完成。
  beforeMount:HTML结构准备与DOM节点绑定，尚未挂载。
  mounted:已经将DOM元素挂载到画面上。

• 实体更新阶段
  beforeUpdate:当资料有更动，画面更新前。
  Update:当资料有更动，画面更新完成。

• 销毁阶段
  beforeUnmount:Vue实体被销毁前。
  unmounted:Vue实体被销毁完成。

展示生命周期

<div id="app">
    <button @click="isShowing = !isShowing">
        <span v-if="isShowing">隐藏元件</span>
        <span v-else>显示元件</span>
    </button>
    <hr>
    <lifecycle v-if="isShowing"></lifecycle>   
</div>

const app = Vue.createApp({
    data() {
        return {
        isShowing: false
        }
    }
});
app.component('lifecycle', {
  template: `<div>
    <h4>{{ state }}</h4>
    <input type="text" class="form-control" v-model="state">
  </div>`,
  data() {
    return {
      state: 'Vue data 资料状态'
    }
  },
  beforeCreate() {
    console.log(`beforeCreate! ${this.state}`);
  },
  created() {
    console.log(`created! ${this.state}`);
    alert(`created! ${this.state}`);
  },
  beforeMount() {
    alert(`beforeMount! ${this.state}`);
  },
  mounted() {
    alert(`mounted! ${this.state}`);
  },
  beforeUpdate() {
    console.log(`beforeUpdate! ${this.state}`);
  },
  updated () {
    console.log(`updated! ${this.state}`);
  },
  beforeUnmount() {
    console.log(`beforeUnmount! ${this.state}`);
  },
  unmounted() {
    console.log(`unmounted! ${this.state}`);
  }
});
app.mount('#app');

这边使用v-if来做示范，画面一开始时HTML还未生成：

点击显示元件开始生命周期：

beforeCreate之前还未能取得Data资料，created阶段已经能看到data里面的资料"Vue data 资料状态"。

点击确认後，来到mounted阶段，DOM元素准备要挂载到HTML:

再次点击确认，HTML已经挂载完毕：

此时我们在更改input里面的文字，更动data里的state的值，此阶段为beforeUpdate到Update的生命周期：

最後销毁阶段beforeUnmount到unmounted，点击隐藏元件，销毁v-if:

codepen 完整程序码

以上这些看完应该是头昏眼花，刚开始学习如果有要操作DOM的元素，建议使用mounted，如果使用created会产生一些问题。

如有错误，欢迎指教。

六角学院
重新认识 Vue.js
Vue.js