当前位置：首页 > news >正文

《vue3学习手记4》

news 来源：原创 2025/5/11 14:17:13

vue3的生命周期

vue2生命周期分为四个阶段，分别是创建，挂载，更新，销毁。包含八个钩子
vue3生命周期分为四个阶段，分别是创建，挂载，更新，卸载。包含八个钩子
vue2和vue3钩子的名字有区别，且写法也有区别。

<template><div class="app"><h2>和为：{{sum}}</h2><button @click="add">点我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue"let sum=ref(0)function add(){sum.value++}
// ==========================================================================// 第一阶段：创建 setup  （脚本中就是setup函数，所以在vue3中创建阶段直接输出）console.log("创建了")
// 当打开页面控制台就输出“创建了”// ==========================================================================// 第二阶段：挂载 (挂载前：onBeforeMount; 挂载后：onMounted)onBeforeMount(()=>{console.log("挂载前")})onMounted(()=>{console.log("挂载完成")})
// 当打开页面控制台就输出“挂载前”和“挂载完成”// ==========================================================================// 第三阶段：更新 (更新前：onBeforeUpdate; 更新后:onUpdated)onBeforeUpdate(()=>{console.log("更新前")})onUpdated(()=>{console.log("更新完成")})
// 当点击按钮，sum值发生改变控制台就输出“更新前”和“更新完成”// ==========================================================================// 第四阶段：卸载 (卸载前：onBeforeUnmount; 卸载后:onUnmounted)onBeforeUnmount(()=>{console.log("卸载前")})onUnmounted(()=>{console.log("卸载完成")})
// 看App组件的条件渲染，当布尔值为false控制台就输出“卸载前”和“卸载完成”，此时组件被卸载
</script>

App.vue:

<template><!-- 这里使用 v-if而不使用v-show，是因为v-if会将不展示的组件销毁，便于演示；但v-show将不展示的组件用display:none进行隐藏--><Person v-if="isShow"/>
</template><script lang="ts" setup name="App">import Person from "./components/Person.vue"// 只需引入，不用注册组件，vue3引入之后会自动注册import {ref} from "vue"let isShow=ref(false)</script>

tips：
对子组件和父组件都进行挂载,则子组件先呈现,父组件再呈现,这和vue的解析流程有关

Hooks

先按照以前的方法写：

<template><div class="app"><h2>和为：{{sum}}</h2><button @click="add">点我sum+1</button><hr><img v-for="(image,index) in images" :key="index" :src="image" alt="小狗图片"><br><button @click="addImage">点击按钮获取一张图片</button></div>
</template><script lang="ts" setup name="Person">
// 要求:从提供的接口获取图片,点击按钮增加一个图片,并使其排成一行
import { ref,reactive } from 'vue';
import axios from "axios"let sum=ref(0)let images=reactive([])// 求和function add(){sum.value++}// 获取图片async function addImage(){try{   //使用try...catch捕获错误信息let result=await axios.get("https://dog.ceo/api/breed/pembroke/images/random")// console.log(result.data.message)images.push(result.data.message)} catch (error){alert(error)}}
</script><style>.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius:10px;padding: 20px;}img {height: 150px;padding-left: 10px;}</style>

这样写并没有显现出vue3组合式开发的好处,一个组件处理的求和事件和获取图片的事件都写在一起,比较混乱
所以可以使用hooks,将所要处理的事件分开写就会很清晰,真正实现vue3组合式开发
使用hooks:
针对上述案例，在src下创建Hooks文件夹，文件夹下创建sumInfo.ts和dogInfo.ts
sumInfo.ts:

import { ref,reactive } from 'vue';
// 用函数包起来并暴露
export default function () {let sum=ref(0)// 求和function add(){sum.value++}// 把数据和方法等进行的操作交出去return {sum,add}
}

dogInfo.ts:

import { ref,reactive } from 'vue';
import axios from "axios"
// 用函数包起来并暴露
export default function () {let images=reactive([])// 获取图片async function addImage(){try{   //使用try...catch捕获错误信息let result=await axios.get("https://dog.ceo/api/breed/pembroke/images/random")// console.log(result.data.message)images.push(result.data.message)} catch (error){alert(error)}}// 把数据和方法等进行的操作交出去return {images,addImage}
}

person.vue:

<template><div class="app"><h2>和为：{{sum}}</h2><button @click="add">点我sum+1</button><hr><img v-for="(image,index) in images" :key="index" :src="image" alt="小狗图片"><br><button @click="addImage">点击按钮获取一张图片</button></div>
</template><script lang="ts" setup name="Person">
import sumInfo from "@/hooks/sumInfo"
import dogInfo from "@/hooks/dogInfo";
// 解构
const {sum,add}=sumInfo()
const {images,addImage}=dogInfo()
</script><style>.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius:10px;padding: 20px;}img {height: 150px;padding-left: 10px;}</style>

效果图：
在这里插入图片描述

路由的基本切换

1.和vue2基本相同
但vue3中需要进行引入
import {RouterView} from "vue-router"
import {RouterLink} from "vue-router"
2.路由组件一般放在pages或views文件夹下，一般组件放在components文件夹下。
3.切换掉的路由组件默认被卸载，再次切换回来时，再进行挂载。

路由的工作模式

vue2:mode:"history" /mode:"hash"
vue3:
HTML5模式：history:createWebHistory 相当于vue2中的history模式
hash模式：history: createWebHashHistory(), 相当于vue2中的hash模式
Memory模式： history: createMemoryHistory(),
hash模式带#号，兼容性更强，担当分享链接时，#可能会被标记为不合法。
history模式不带#号，页面美观，但可能刷新页面会出现404的问题。