一、图示vue2.0到vue3.0变化

beforeCreate -> use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeUnmount -> onBeforeUnmount

unmounted -> onUnmounted

errorCaptured -> onErrorCaptured

renderTracked -> onRenderTracked

renderTriggered -> onRenderTriggered

activated -> onActivated

deactivated -> onDeactivated

2.解析图的变化

1、去掉了vue2.0中的 beforeCreate 和 created 两个阶段，相同的增加了一个 setup

2、beforeMount 挂载之前    改名  onBeforeMount

3、mounted 挂载之后    改名  onMounted

4、beforeUpdate 数据更新前    改名  onBeforeUpdate

5、updated 数据更新后    改名  onUpdated

6、beforeDestroy 销毁前    改名  onBeforeUnmount

7、destoryed 销毁后    改名  onUnmounted

8、errorCaptured 报错    改名  onErrorCaptured

3.官方对生命周期挂钩的解释
您可以将其添加到生命周期挂钩之前。 “on” 访问组件的生命周期挂钩。

下表包含如何 setup () 内部呼叫生命周期挂钩：

选项式 API Hook inside setup
beforeCreate    Not needed*
created Not needed*
beforeMount onBeforeMount
mounted onMounted
beforeUpdate    onBeforeUpdate
updated onUpdated
beforeUnmount   onBeforeUnmount
unmounted   onUnmounted
errorCaptured   onErrorCaptured
renderTracked   onRenderTracked
renderTriggered onRenderTriggered
TIP

因为 setup 是围绕 beforeCreate 和 created 生命周期挂钩运行，因此不需要显式定义它们。换句话说，在这些钩子中编写的任何代码都应该直接位于 setup 在函数中编写。

这些函数接受将在组件调用挂钩时执行的回调函数。:

// MyBook.vue

import {onMounted} from vue
export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log(Component is mounted!)
    })
  }
}

4.官方配对 Setup 详细内容如下：
参数
使用 setup 函数，它将接受两个参数：

props
context
让我们更深入地了解每个参数是如何使用的。

Props

setup 该函数中的第一个参数是 props。如在标准组件中所期望的，setup 函数中的 props 在新的情况下响应 prop 它将被更新。

// MyBook.vue

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

WARNING

然而，由于 props 是有响应的，您不能使用 ES6 解构，因为它消除了 prop 响应性。

如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 要做到这一点：

// MyBook.vue

import { toRefs } from vue

setup(props) {
    const { title } = toRefs(props)

    console.log(title.value)
}

如果 title 是可选的 prop，然后是传入的 props 可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。您需要使用 toRef 替代它：

// MyBook.vue

import { toRef } from vue
setup(props) {
    const title = toRef(props, title)
    console.log(title.value)
}

Context

传递给 setup 该函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，该对象公开 property：

// MyBook.vue

export default {
  setup(props, context) {
    // Attribute (无响应对象)
    console.log(context.attrs)

    // 插槽 (无响应对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

context 是一个普通的 JavaScript 对象，即它没有响应，这意味着您可以安全地。 context 使用 ES6 解构。

// MyBook.vue
export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

attrs 和 slots 是始终随组件本身更新的有状态对象。这意味着您应该避免解构它们，并始终 attrs.x 或 slots.x 指代之道 property。请注意 props 不同，attrs 和 slots 没有反应。如果你打算跟随 attrs 或 slots 更改应用程序的副作用，则应在。 onUpdated 在生命周期钩子中执行此操作。

访问组件的 property

执行 setup 尚未创建组件实例。因此，您只能访问以下内容 property：

props
attrs
slots
emit

换句话说，您将无法访问以下组件选项：

data
computed
methods

与模板结合使用

如果 setup 返回可以在组件模板中传递的对象。 setup 的 props property 对该对象的相同访问权限。 property：

注意，从 setup 返回的 refs 在模板中访问时，它会自动解锁，因此不应在模板中使用。 .value。

使用渲染功能

setup 您还可以返回一个呈现函数，该函数可以直接使用在同一作用域中声明的响应状态：

// MyBook.vue

import { h, ref, reactive } from vue

export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: Vue 3 Guide })
    // Please note that we need to explicitly expose ref value here
    return () => h(div, [readersNumber.value, book.title])
  }
}

使用 this

在 setup() 内部，this 它不会是对此活动实例的引用，因为 setup() 在分析其他组件选项之前被调用，因此 setup() 内部的 this 的行为 this 完全不同。这与其他选项的方式相同。 API 一起使用 setup() 可能会导致混乱。

访问组件的 property
执行 setup 尚未创建组件实例。因此，您只能访问以下内容 property：

props
attrs
slots
emit
换句话说，您将无法访问以下组件选项：

data
computed
methods