setup和生命周期

setup()函数是在created生命周期函数被完全初始化之前执行的函数。所以不能使用this
通过ref()和reactive( )函数的使用，可以完全替换掉以前的data{}语法形式。
使用组合式API没有 beforeCreate 和 created 这两个生命周期

setup 返回的是一个对象，这个对象的属性会与组件中 data 函数返回的对象进行合并，返回的方法和 methods 合并，合并之后直接可以在模板中使用，如果有重名的情况，会使用 setup 返回的属性和方法，methods 和 data 能够拿到 setup 中的方法应该进行了合并，反之 setup 不能拿到它们的属性和方法，因为这个时候 this = undefined

• onBeforeMount
  在挂载开始之前被调用：相关的 render 函数首次被调用。
• onMounted
  组件挂载时调用
• onBeforeUpdate
  数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
• onUpdated
  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
• onBeforeUnmount
  在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
• onUnmounted
  卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
• onErrorCaptured
  Vue 实例有一个 onErrorCaptured 钩子，每当事件处理程序或生命周期钩子抛出错误时，Vue 会调用该钩子。
  return false 错误不会冒泡到父级组件
  return true 错误不会冒泡到父级组件 不消费事件 控制台抛出异常
  ★只捕获嵌套组件中的错误，同级view不会捕获

**

<template>
  <span id="count">{{ count }}</span>
  同组件不会经过<button @click="notAMethod">Throw</button>
  子组件方式会经过 <test></test>
</template>
<script setup>
import { defineComponent, onErrorCaptured, ref } from 'vue'
// Vue 不会调这个钩子，因为错误发生在这个 Vue 实例中，而不是子组件。
onErrorCaptured(err => {
  console.log('Caught error', err.message)
  return false
})
</script>

• onRenderTracked
  注册一个调试钩子，当组件的渲染效果跟踪到响应性依赖项时，调用。
  此挂钩仅在开发模式下运行，在服务器端渲染期间不调用。
  vue.js文件从3.2.0开始改变了只会在页面渲染的时候执行一次，局部更新不执行；
• onRenderTriggered
  当虚拟 DOM 重新渲染被触发时调用。数据更新视图更新时触发
• onActivated
  被 keep-alive 缓存的组件激活时调用。
• onDeactivated
  被 keep-alive 缓存的组件停用时调用

简书原文链接在这，纯搬！setup和生命周期 - 简书 (jianshu.com)