对比vue2
beforeCreate -> 使用setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
setup
setup处于beforeCreate之前，beforeCreate和created都将使用setup代替，里面没有this指向，没有data,没有methods，组合Api最终编译为options Api。
onBeforeMount
onBeforeMount页面挂在之前；
onMounted
onMounted页面初始化完毕，一般进行ajax获取数据；
onBeforeUpdate
onBeforeUpdate页面进行更新之前；
onUpdated
onUpdated页面更新完成之后；
onBeforeUnmount
onBeforeUnmount页面销毁之前；
onUnmounted
onUnmounted页面销毁；
首先下载vue-router 我们在进行页面跳转的时候会使用到；
在main中进行挂载全局 router
import {
createApp } from 'vue'
import App from './App.vue'
import './index.css'
import {
createRouter, createWebHashHistory } from 'vue-router'
const HelloWorld = () => import("./components/HelloWorld.vue")
const home = () => import("./components/home.vue")
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/hellow', component: HelloWorld },
{
path: '/', component: home}
],
})
createApp(App).use(router).mount('#app')
/home
<template>
<div>
<p>age:{
{
strObj.age }}</p>
<button @click="changeAgeFun">changeAgeFun按钮</button>
<button @click="goHellowPages">跳转到hellow页面</button>
</div>
</template>
<script>
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from "vue";
import {
useRouter } from "vue-router";
export default {
name: "App",
setup() {
let strObj = ref({
age: 18 });
onBeforeMount(() => {
console.log("onBeforeMount===");
});
onMounted(() => {
console.log("onMounted===");
});
onBeforeUpdate(() => {
console.log("onBeforeUpdate===");
});
onUpdated(() => {
console.log("onUpdated===");
});
onBeforeUnmount(() => {
console.log("onBeforeUnmount===");
});
onUnmounted(() => {
console.log("onUnmounted===");
});
const changeAgeFun = () => {
strObj.value.age++;
console.log("年龄进行加，页面发生改变===");
};
const router = useRouter();
const goHellowPages = () => {
console.log("进行路由跳转===");
router.push("/hellow");
};
return {
strObj, changeAgeFun, goHellowPages };
},
};
</script>
/hellow
<template>
<h1>我是hellow组件</h1>
</template>
<script>
export default {
}
</script>
首先点击改变年龄按钮，让年龄改变，出发页面的更新，随后进行页面的跳转，销毁当前实例
