Vue 组合式 API 生命周期钩子

在 Vue2 中，我们通过以下方式实现生命周期钩子函数：

export default {beforeMount() {console.log('V2 beforeMount!')},mounted() {console.log('V2 mounted!')}
};

在 Vue3 组合 API 中实现生命周期钩子函数可以在 setup() 函数中使用带有 on 前缀的函数：

import { onBeforeMount, onMounted } from 'vue';
export default {setup() {onBeforeMount(() => {console.log('V3 beforeMount!');})onMounted(() => {console.log('V3 mounted!');})}
};

下表为 Options API 和 Composition API 之间的映射，包含如何在 setup () 内部调用生命周期钩子：

Vue2 Options-based API	Vue Composition API
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

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

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

setup() {
...// 组件被挂载时，我们用 onMounted 钩子记录一些消息onMounted(() => console.log('component mounted!'));
...
}

 

模板引用

在使用组合式 API 时，响应式引用和模板引用的概念是统一的。

为了获得对模板内

<template> <div ref="root">This is a root element</div>
</template><script>import { ref, onMounted } from 'vue'export default {setup() {const root = ref(null)onMounted(() => {// DOM 元素将在初始渲染后分配给 refconsole.log(root.value) // <div>This is a root element</div>})return {root}}}
</script>

元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回：

以上实例中我们在渲染上下文中暴露 root，并通过 ref="root"，将其绑定到 div 作为其 ref。

作为模板使用的 ref 的行为与任何其他 ref 一样：它们是响应式的，可以传递到 (或从中返回) 复合函数中。

v-for 中的用法

<template><div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">{{ item }}</div>
</template><script>import { ref, reactive, onBeforeUpdate } from 'vue'export default {setup() {const list = reactive([1, 2, 3])const divs = ref([])// 确保在每次更新之前重置refonBeforeUpdate(() => {divs.value = []})return {list,divs}}}
</script>

组合式 API 模板引用在 v-for 内部使用时没有特殊处理。相反，请使用函数引用执行自定义处理：

侦听模板引用

侦听模板引用的变更可以替代前面例子中演示使用的生命周期钩子。

但与生命周期钩子的一个关键区别是，watch() 和 watchEffect() 在 DOM 挂载或更新之前运行会有副作用，所以当侦听器运行时，模板引用还未被更新。

<template><div ref="root">This is a root element</div>
</template><script>import { ref, watchEffect } from 'vue'export default {setup() {const root = ref(null)watchEffect(() => {// 这个副作用在 DOM 更新之前运行，因此，模板引用还没有持有对元素的引用。console.log(root.value) // => null})return {root}}}
</script>

 因此，使用模板引用的侦听器应该用 flush: 'post' 选项来定义，这将在 DOM 更新后运行副作用，确保模板引用与 DOM 保持同步，并引用正确的元素。

<template><div ref="root">This is a root element</div>
</template><script>import { ref, watchEffect } from 'vue'export default {setup() {const root = ref(null)watchEffect(() => {console.log(root.value) // => <div>This is a root element</div>}, {flush: 'post'})return {root}}}
</script>