快捷導(dǎo)航

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

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

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

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

const { onMounted } = Vue

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

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

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

整體代碼如下：

const { createComponent, createApp, reactive } = Vue

// 計(jì)數(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">刪庫(kù)啦</button>
    </div>
  `,
  // 相當(dāng)于 vue2.x beforeCreated, created
  setup(props) {
    const countOps = useCount(props.initCount)
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 beforeCreated, created")
    return { ...countOps }
  },
  onBeforeMount() {
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 beforeMount")
  },
  onMounted() {
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 mounted")
  },
  onBeforeUpdate() {
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 beforeUpdate")
  },
  onUpdated() {
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 updated")
  },
  onBeforeUnmount() {
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 beforeDestroy")
  },
  onUnmounted() {
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 destroyed")
  },
  onErrorCaptured() {
    console.log("Counter ===> 相當(dāng)于 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)建一個(gè) 跟組件 app
const App = createComponent({
  // 這個(gè)就相對(duì)于 在另一個(gè) .vue 文件 引用 Counter 組件，需要在 components 屬性局部注冊(cè)組件
  components: {
    Counter,
  },
  // 掛載到 App 模板中
  template: `
    <div class="container">
      <h3>計(jì)數(shù)器示例</h3>
      <Counter />
    </div>
  `,
  setup() {
    console.log("App ===> 相當(dāng)于 vue2.x 中 beforeCreated, created")
  },
  onBeforeMount() {
    console.log("App ===> 相當(dāng)于 vue2.x 中 beforeMount")
  },
  onMounted() {
    console.log("App ===> 相當(dāng)于 vue2.x 中 mounted")
  },
  onBeforeUpdate() {
    console.log("App ===> 相當(dāng)于 vue2.x 中 beforeUpdate")
  },
  onUpdated() {
    console.log("App ===> 相當(dāng)于 vue2.x 中 updated")
  },
  onBeforeUnmount() {
    console.log("App ===> 相當(dāng)于 vue2.x 中 beforeDestroy")
  },
  onUnmounted() {
    console.log("App ===> 相當(dāng)于 vue2.x 中 destroyed")
  },
  onErrorCaptured() {
    console.log("Counter ===> 相當(dāng)于 vue2.x 中 errorCaptured")
  }
})

// 啟動(dòng)
// container 就是相當(dāng)于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相當(dāng)于 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: