Vue2 与 Vue3 的生命周期勾子对比：
Vue2 Vue3beforeCreate setup(替代)
created setup(替代)
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured
空 onRenderTracked
空 onRenderTriggered
除了 2.x 生命周期等效项之外，Composition API 还提供了以下调试挂钩：
onRenderTracked
onRenderTriggered
这两个钩子都收到一个 DebuggerEvent，类似于观察者的 onTrack 和 onTrigger 选项：
export default { onRenderTriggered(e) { debugger // inspect which dependency is causing the component to re-render } }例子：
<html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello Vue3.0</title> <style> body, #app { text-align: center; padding: 30px; } </style> <script src=""></script> </head> <body> <h3>Lifecycle Hooks</h3> <div></div> </body> <script> const { createApp, reactive, onMounted, onUpdated, onUnmounted } = Vue const App = { template: ` <div> <button @click='click'>reverse</button> <div>{{ state.message }}</div> </div>` , setup() { console.log('setup!') const state = reactive({ message: 'Hello Vue3!!' }) click = () => { state.message = state.message.split('').reverse().join('') } onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmounted(() => { console.log('unmounted!') }) return { state, click } } } createApp(App).mount('#app') </script> </html>
笔者 GitHub 博客地址: https://github.com/biaochenxuying/blog
本文只列出了笔者觉得会用得非常多的 api，Vue3.0 里面还有不少新特性的，比如 customRef、markRaw ，如果读者有兴趣可看 Vue Composition API 文档。
Vue Composition API 文档:
vue-next 地址: https://github.com/vuejs/vue-next