vue3.0生命周期的示例代碼

更新時間：2020年09月24日 10:49:04 作者：碼奴吳彥祖

這篇文章主要介紹了vue3.0生命周期的相關(guān)知識，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

在組件化的框架中，比如Angular、React或Vue，都為組件定義了生命周期這個概念，每個組件實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程，例如：需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時，在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，它們提供給用戶在組件的不同階段添加自己的代碼的機會。
使用過Vue2.x的朋友肯定對它的生命周期鉤子很熟悉了，因為在實際的開發(fā)過程中我們多多少少會用到他們，比如 created、mounted、destoryed等等。而在Vue3.0中，Vue2.x Options API形式的生命周期鉤子函數(shù)和新的Composition API都可以使用，來看個示例代碼就明白了：

const { onMounted } = Vue

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

兩種形式的生命周期函數(shù)可以共存（當然實際使用的時候最好只選用一種），它們都會被執(zhí)行。Composition API形式的生命周期函數(shù)都是在 setup 方法中被調(diào)用注冊。
最后，在實際的開發(fā)過程中，請注意一下Options API形式的組件生命周期鉤子和Composition API之間的實際對應關(guān)系：

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

整體代碼如下：

const { createComponent, createApp, reactive } = Vue

// 計數(shù)器組件
const Counter = {
  props: {
    initCount: {
      type: Number,
      default: 0
    }
  },
  template: `
    <div class="counter-display">
      <span class="counter-label">恭喜你，你已經(jīng)寫了</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 }
}

// 創(chuàng)建一個 跟組件 app
const App = createComponent({
  // 這個就相對于 在另一個 .vue 文件 引用 Counter 組件，需要在 components 屬性局部注冊組件
  components: {
    Counter,
  },
  // 掛載到 App 模板中
  template: `
    <div class="container">
      <h3>計數(shù)器示例</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() 內(nèi)部返回的就是 new Vue()
const app = createApp()
// 掛載組件
app.mount(App, container)

轉(zhuǎn)載自：https://zhuanlan.zhihu.com/p/95968847

到此這篇關(guān)于vue3.0生命周期的示例代碼的文章就介紹到這了,更多相關(guān)vue3.0生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: