您现在的位置是:自如初>Vue.jsVue.js
Vue3 setup中使用生命周期函数
温新
2021-08-22 20:34:44
【Vue.js】
7596人已围观
简介Vue3 setup中使用生命周期函数.因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
hi,我是温新,一名PHPer
setup中使用生命周期函数需要加上on
。
因为 setup
是围绕 beforeCreate
和 created
生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup
函数中编写。
生命周期函数有:onBeforeMount
、onMounted
、onBeforeUpdate
、onUpdated
、onBeforeUnmount
、onUnmounted
、onErrorCaptured
、onRenderTracked
、 onRenderTriggered
、onActivated
、onDeactivated
。
<div id="app"></div>
<script>
const app = Vue.createApp({
setup() {
const {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onRenderTriggered,
} = Vue;
onBeforeMount( () => {
console.log('before-mount');
});
onMounted( () => {
console.log('mounted');
});
onBeforeUpdate( () => {
console.log('before-update');
});
onUpdated( () => {
console.log('updated');
});
}
});
const vm = app.mount('#app');
</script>
我是温新
每天进步一点,就一点点
很赞哦!(39)
相关文章
- Vue 3 & Pinia 状态管理(8) - 组件外使用存储(完)
- Vue 3 & Pinia 状态管理(7) - Pinia 持久化
- Vue 3 & Pinia 状态管理(6) - Pinia Plugins(插件)的相关使用
- Vue 3 & Pinia 状态管理(5) - Pinia Actions 的相关使用
- Vue 3 & Pinia 状态管理(4) - Pinia Getters 的相关使用
- Vue 3 & Pinia 状态管理(3) - Pinia State 的相关使用
- Vue 3 & Pinia 状态管理(2) - Pinia 是什么 & 创建根存储
- Vue 3 & Pinia 状态管理(1) - Pinia 快速上手
- Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9 登录功能-前后端分离演示案例(二)
- Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9前后端分离演示案例(一)