在元件化的框架中，比如Angular、React或Vue，都為元件定義了生命週期這個概念，每個元件例項在被建立時都要經過一系列的初始化過程，例如：需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時，在這個過程中也會執行一些叫做生命週期鉤子的函式，它們提供給使用者在元件的不同階段新增自己的程式碼的機會。
使用過Vue2.x的朋友肯定對它的生命週期鉤子很熟悉了，因為在實際的開發過程中我們多多少少會用到他們，比如 created、mounted、destoryed等等。而在Vue3.0中，Vue2.x Options API形式的生命週期鉤子函式和新的Composition API都可以使用，來看個示例程式碼就明白了：

const { onMounted } = Vue

const MyComp = {
  
  // Options API
  mounted() {
    console.log('>>>>>> mounted 1')
  },setup() {
    // Composition API
    onMounted(() => {
      console.log('++++++ mounted 2')
    })
  }
}

兩種形式的生命週期函式可以共存（當然實際使用的時候最好只選用一種），它們都會被執行。Composition API形式的生命週期函式都是在 setup 方法中被呼叫註冊。

beforeCreate -> 請使用 setup()
created -> 請使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

整體程式碼如下：

const { createComponent,createApp,reactive } = Vue

// 計數器元件
const Counter = {
  props: {
    initCount: {
      type: Number,default: 0
    }
  },template: `
    <div class="counter-display">
      <span class="counter-label">恭喜你，你已經寫了</span>
      <span class="counter-text">{{ state.count }}</span>
      <span class="counter-label">斤程式碼！</span>
    </div>
    <div class="counter-btns">
      <button class="btn" @click="increase">寫一斤</button>
      <button class="btn" @click="reset">刪庫啦</button>
    </div>
  `,// 相當於 vue2.x beforeCreated,created
  setup(props) {
    const countOps = useCount(props.initCount)
    console.log("Counter ===> 相當於 vue2.x 中 beforeCreated,created")
    return { ...countOps }
  },onBeforeMount() {
    console.log("Counter ===> 相當於 vue2.x 中 beforeMount")
  },onMounted() {
    console.log("Counter ===> 相當於 vue2.x 中 mounted")
  },onBeforeUpdate() {
    console.log("Counter ===> 相當於 vue2.x 中 beforeUpdate")
  },onUpdated() {
    console.log("Counter ===> 相當於 vue2.x 中 updated")
  },onBeforeUnmount() {
    console.log("Counter ===> 相當於 vue2.x 中 beforeDestroy")
  },onUnmounted() {
    console.log("Counter ===> 相當於 vue2.x 中 destroyed")
  },onErrorCaptured() {
    console.log("Counter ===> 相當於 vue2.x 中 errorCaptured")
  }
}

function useCount(initCount) {
  const state = reactive({ count: initCount })
  console.log("state reactive",state)
  const increase = () => { state.count++ }
  const reset = () => { state.count = 0 }
  return { state,increase,reset }
}

// 建立一個 跟元件 app
const App = createComponent({
  // 這個就相對於 在另一個 .vue 檔案 引用 Counter 元件，需要在 components 屬性區域性註冊元件
  components: {
    Counter,},// 掛載到 App 模板中
  template: `
    <div class="container">
      <h3>計數器示例</h3>
      <Counter />
    </div>
  `,setup() {
    console.log("App ===> 相當於 vue2.x 中 beforeCreated,created")
  },onBeforeMount() {
    console.log("App ===> 相當於 vue2.x 中 beforeMount")
  },onMounted() {
    console.log("App ===> 相當於 vue2.x 中 mounted")
  },onBeforeUpdate() {
    console.log("App ===> 相當於 vue2.x 中 beforeUpdate")
  },onUpdated() {
    console.log("App ===> 相當於 vue2.x 中 updated")
  },onBeforeUnmount() {
    console.log("App ===> 相當於 vue2.x 中 beforeDestroy")
  },onUnmounted() {
    console.log("App ===> 相當於 vue2.x 中 destroyed")
  },onErrorCaptured() {
    console.log("Counter ===> 相當於 vue2.x 中 errorCaptured")
  }
})

// 啟動
// container 就是相當於 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相當於 new Vue() 內部返回的就是 new Vue()
const app = createApp()
// 掛載元件
app.mount(App,container)

轉載自：https://zhuanlan.zhihu.com/p/95968847

到此這篇關於vue3.0生命週期的示例程式碼的文章就介紹到這了,更多相關vue3.0生命週期內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！