vue3.0生命周期 ​

一、图示vue2.0到vue3.0改变 ​

• ~beforeCreate~-> usesetup()

• ~created~-> usesetup()

• beforeMount->onBeforeMount

• mounted->onMounted

• beforeUpdate->onBeforeUpdate

• updated->onUpdated

• beforeUnmount->onBeforeUnmount

• unmounted->onUnmounted

• errorCaptured->onErrorCaptured

• renderTracked->onRenderTracked

• renderTriggered->onRenderTriggered

• activated->onActivated

• deactivated->onDeactivated

二、解析图示的改变 ​

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

三、官方对生命周期钩子的解释 ​

你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。

下表包含如何在setup ()内部调用生命周期钩子：

TIP

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

这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

export default {setup() {onMounted(() => {console.log('Component is mounted!')    })  }}

四、官方对Setup 的详细介绍 ​

参数 ​

使用setup函数时，它将接受两个参数：

1. props
2. context

让我们更深入地研究如何使用每个参数。

#Props ​

setup函数中的第一个参数是props。正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的 prop 时，它将被更新。

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

WARNING

但是，因为props是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

如果需要解构 prop，可以通过使用setup函数中的toRefs来完成此操作：

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

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

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

#Context ​

传递给setup函数的第二个参数是context。context是一个普通的 JavaScript 对象，它暴露三个组件的 property：

export default {setup(props, context) {console.log(context.attrs)console.log(context.slots)console.log(context.emit)  }}

context是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对context使用 ES6 解构。

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的propsproperty 一样访问该对象的 property：

<template><div>{{ readersNumber }} {{ book.title }}</div></template><script>import { ref, reactive } from 'vue'export default {setup() {const readersNumber = ref(0)const book = reactive({ title: 'Vue 3 Guide' })return {        readersNumber,        book      }    }  }</script>

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

#使用渲染函数 ​

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

import { h, ref, reactive } from 'vue'export default {setup() {const readersNumber = ref(0)const book = reactive({ title: 'Vue 3 Guide' })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