Sample code for the vue 3.0 lifecycle

In the component framework, such as Angular, React or Vue, the concept of life cycle is defined for components. When each component instance is created, it has to go through a series of initialization processes, such as setting data listening, compiling templates, mounting instances to DOM and updating DOM when data changes. At the same time, a number of functions called lifecycle hooks are run during this process, which give users the opportunity to add their own code at different stages of the component.
Friends who have used Vue2.x must be familiar with its lifecycle hooks, because we will use them more or less in the actual development process, such as created, mounted, destoryed and so on. In Vue 3.0, both the lifecycle hook function in the form of Vue2.x Options API and the new Composition API are available, as shown by a sample code:

const { onMounted } = Vue

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

Two forms of life cycle function can coexist (of course, it is best to choose only one in actual use), and they will both be executed. Life cycle functions in the form of Composition API are all called and registered in the setup method.
Finally, in the actual development process, notice the actual correspondence between the component lifecycle hook in the form of Options API and Composition API under 1:

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

The overall code is as follows:

const { createComponent, createApp, reactive } = Vue

//  Counter component 
const Counter = {
  props: {
    initCount: {
      type: Number,
      default: 0
    }
  },
  template: `
    <div class="counter-display">
      <span class="counter-label"> Congratulations, you have written </span>
      <span class="counter-text">{{ state.count }}</span>
      <span class="counter-label"> Jin code! </span>
    </div>
    <div class="counter-btns">
      <button class="btn" @click="increase"> Write 1 Jin </button>
      <button class="btn" @click="reset"> Delete the library </button>
    </div>
  `,
  //  Equivalent to  vue2.x beforeCreated, created
  setup(props) {
    const countOps = useCount(props.initCount)
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  beforeCreated, created")
    return { ...countOps }
  },
  onBeforeMount() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  beforeMount")
  },
  onMounted() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  mounted")
  },
  onBeforeUpdate() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  beforeUpdate")
  },
  onUpdated() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  updated")
  },
  onBeforeUnmount() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  beforeDestroy")
  },
  onUnmounted() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  destroyed")
  },
  onErrorCaptured() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  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 }
}

//  Create 1 A   Heel component  app
const App = createComponent({
  //  This is relative to   In another 1 A  .vue  Documents   Quote  Counter  Component, which is required in the  components  Property local registration component 
  components: {
    Counter,
  },
  //  Mount to  App  In the template 
  template: `
    <div class="container">
      <h3> Counter sample </h3>
      <Counter />
    </div>
  `,
  setup() {
    console.log("App ===>  Equivalent to  vue2.x  Medium  beforeCreated, created")
  },
  onBeforeMount() {
    console.log("App ===>  Equivalent to  vue2.x  Medium  beforeMount")
  },
  onMounted() {
    console.log("App ===>  Equivalent to  vue2.x  Medium  mounted")
  },
  onBeforeUpdate() {
    console.log("App ===>  Equivalent to  vue2.x  Medium  beforeUpdate")
  },
  onUpdated() {
    console.log("App ===>  Equivalent to  vue2.x  Medium  updated")
  },
  onBeforeUnmount() {
    console.log("App ===>  Equivalent to  vue2.x  Medium  beforeDestroy")
  },
  onUnmounted() {
    console.log("App ===>  Equivalent to  vue2.x  Medium  destroyed")
  },
  onErrorCaptured() {
    console.log("Counter ===>  Equivalent to  vue2.x  Medium  errorCaptured")
  }
})

//  Start 
// container  Is equivalent to  new Vue()  Medium  el  Element 
const container = document.querySelector("#app")
// createApp()  Is equivalent to  new Vue()  What is returned internally is  new Vue()
const app = createApp()
//  Mount components 
app.mount(App, container)

Reproduced from: https://zhuanlan.zhihu.com/p/95968847