组合API-生命周期

 

回顾vue2.x生命周期钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed
• 认识vue3.0生命周期钩子函数
• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

• 演示代码：

  演示代码：

   

  <template>
    <div class="container">
      container
    </div>
  </template>
  <script>
  import { onBeforeMount, onMounted } from 'vue'
  export default {
    setup () {
      onBeforeMount(()=>{
        console.log('DOM渲染前',document.querySelector('.container'))
      })
      onMounted(()=>{
        console.log('DOM渲染后1',document.querySelector('.container'))
      })
      onMounted(()=>{
        console.log('DOM渲染后2',document.querySelector('.container'))
      })
    },
  }
  </script>