Vue3（三）：生命周期、路由、自定义hooks

这里终于明白了为什么一直有这个语法报错，就是在提示你哪里错的地方上方注释一行/*eslint-disable*/，之前一直警告这个错误感谢老师！

一、vue2和vue3生命周期

还有一个问题就是父组件和子组件哪个先挂载完毕呢？答案是子组件先挂载完毕。因为首先解析入口文件index.html=>main.ts=>App.vue=>Person.vue，所以当然是Person.vue先挂载完毕，才能继续解析App.vue。

  <template><div class="person"><h2>当前求和为：{{ sum }}</h2><button @click="changeSum">点我sum+1</button></div></template><!-- vue3写法 --><script lang="ts" setup name="Person">import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'// 数据let sum = ref(0)// 方法function changeSum() {sum.value += 1}console.log('setup')// 生命周期钩子onBeforeMount(()=>{console.log('挂载之前')})onMounted(()=>{console.log('挂载完毕')})onBeforeUpdate(()=>{console.log('更新之前')})onUpdated(()=>{console.log('更新完毕')})onBeforeUnmount(()=>{console.log('卸载之前')})onUnmounted(()=>{console.log('卸载完毕')})</script>

二、自定义hooks

hook本质是一个函数，用use开头，把setup函数中使用的Composition API进行了封装。可以更方便我们去复用处理数据的逻辑.

有时候我们会写很多数据和方法，如果都写在Person.vue会很大很复杂也不好修改，所以我们可以在src下新建hooks文件夹，建立useDog.ts和useSum.ts，拆分Person.vue中的东西。

例如：

Person.vue

<template><div class="person"><h2>当前求和为：{{ sum }}，放大十倍{{ bigSum }}</h2><button @click="add">点我sum+1</button><hr><img v-for="(dog,index) in dogList" :src="dog" :key="index"><hr><button @click=" getDog">再来一只小狗</button></div>
</template><script lang="ts" setup name="Person">import useSum from '@/hooks/useSum'import useDog from '@/hooks/useDog'let { sum,add,bigSum} = useSum()let { dogList, getDog } = useDog()
</script><style scoped>
.person {background-color: skyblue;border-radius: 0 0 10px;box-shadow: 10px;padding: 10px;
}
button {margin: 5px;
}
img{height: 100px;
}
</style>

useDog.ts

import { reactive, onMounted } from 'vue';
import axios from 'axios';export default function () {//数据let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg',]);//方法async function getDog() {try {let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');dogList.push(result.data.message);} catch (error) {alert(error);}}//钩子onMounted(() => {getDog();//千万别忘了在上面引入onMounted});//向外部提供数据return { dogList, getDog };
}

useSum.ts

import { ref,onMounted,computed } from 'vue';export default function () {//数据let sum = ref(0);let bigSum = computed(()=>{return sum.value*10})//方法function add() {sum.value += 1;}//钩子onMounted(()=>{add()})//向外传输return {sum,add,bigSum}
}

效果：

但是可能遇到如下报错，'xxx' is never reassigned.use 'const' instead prefer-const，解决办法如下：

三、路由

1.理解：

2.路由的基本切换

其实大致和vue2是差不多的，

（1）首先要下载vue-router的依赖

（可能有些在创建项目的时候就已经选择了要配置router，那么这时候就不要下载了，可以去packge.json中查看自己的vue-router版本号如果有的话就不用下载了）

npm install vue-router@4（后面可以指定版本，或者不@直接下载就是最新版本）

（2）在src目录下新建一个router目录，在router目录下新建一个index.ts文件

//创建一个路由器并暴露粗去//第一步：引入
import { createRouter, createWebHistory } from 'vue-router';
//引入一个个要呈现的组件
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import About from '../pages/About.vue';//第二步：创建路由器
const router = createRouter({history: createWebHistory(),//路由器的工作模式routes: [//引入路由规则{path: '/home',component: Home,},{path: '/news',component: News,},{path: '/about',component: About,},],
});
export default router;

createRouter函数，新建一个路由器；

createWebHistory函数可以创建一个 HTML5 History 路由实例，从而能够支持浏览器的前进和后退按钮。

routes：存放一个一个的路由；在这里每一个路由都是一个对象，必须要指定的由两个参数：

path：指定路由的路径

component：指定路由对应的组件

（3）在main.ts中引入路由

import { createApp } from "vue"
import APP from './App.vue'
//引入路由
import router from './router'
//创建一个应用
const app = createApp(APP)
// 使用路由器
app.use(router)
//挂载整个应用到app中
.mount('#app')

（4）实现路由的跳转

在App.vue中这样写，利用RouterLink导航和to=""路径active-class=""实现点哪哪亮效果

RouterLink标签会被渲染成一个 <a> 标签，点击它时会触发路由切换。

RouterView 标签是展示区，会根据当前路由的路径自动加载对应的组件，并将其渲染到页面中。

<template><div class="app"><h2 class="title">Vue路由测试</h2><!-- 导航区 --><div class="navigate"><RouterLink to="/home" active-class="xiaozhupeiqi">首页</RouterLink><RouterLink to="/news" active-class="xiaozhupeiqi">新闻</RouterLink><RouterLink to="/about" active-class="xiaozhupeiqi">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView></div></div>
</template><script lang="ts" setup name="App">
import { RouterView, RouterLink } from 'vue-router'</script><style>
/* App */
.title {text-align: center;word-spacing: 5px;margin: 30px 0;height: 70px;line-height: 70px;background-image: linear-gradient(45deg, gray, white);border-radius: 10px;box-shadow: 0 0 2px;font-size: 30px;
}.navigate {display: flex;justify-content: space-around;margin: 0 100px;
}.navigate a {display: block;text-align: center;width: 90px;height: 40px;line-height: 40px;border-radius: 10px;background-color: gray;text-decoration: none;color: white;font-size: 18px;letter-spacing: 5px;
}.navigate a.xiaozhupeiqi {background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;
}.main-content {margin: 0 auto;margin-top: 30px;border-radius: 10px;width: 90%;height: 400px;border: 1px solid;
}</style>

（5）pages中的静态页面

分别有Home.vue,About.vue,News.vue 这里不再写明，可以去老师的笔记里面自取

（6）效果

3.两个注意点

4.两种工作模式

1. history模式

优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。

//创建一个路由器并暴露粗去//第一步：引入
import { createRouter, createWebHistory } from 'vue-router';
//引入一个个要呈现的组件
import Home from '../pages/Home.vue';//第二步：创建路由器
const router = createRouter({history: createWebHistory(),//路由器的工作模式historyroutes: [//引入路由规则{path: '/home',component: Home,}],
});
//暴露出去
export default router;

2. hash模式

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。

 const router = createRouter({history:createWebHashHistory(), //hash模式/******/})

5.to的两种写法

字符串写法和对象写法

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link><!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

其实对象写法也分为两种，在学完命名之后可以有name和path两种写法

6.命名路由

作用：可以简化路由跳转及传参

写法：name:'xxx'

这样写的话就可以在跳转路由的时候这样写：

7.嵌套路由

假如想在新闻的展示区再做一个导航区和显示区，如图所示，这时候就需要嵌套路由。

（1）首先我们编写`News`的子路由，在pages下新建Detail.vue

<template><ul class="news-list"><li>编号：xxx</li><li>标题：xxx</li><li>内容：xxx</li></ul>
</template><script setup lang="ts" name="About"></script><style scoped>
.news-list {list-style: none;padding-left: 20px;
}.news-list>li {line-height: 30px;
}
</style>

（2）配置路由规则，使用children配置项

用法：children:[{ path:'xxxx', componnent:xxxx}]

{name: 'xinwen',path: '/news',component: News,children:[{path: 'detail',//嵌套路由路径不用加/component: Detail,}]},

（3） news.vue中跳转路由（记得要加完整路径）

<template><!-- 导航区 --><div class="news"><ul><li v-for="news in newsList" :key="news.id"><RouterLink to="/news/detail">{{ news.title }}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div>
</template><script setup lang="ts" name="News">
import { reactive } from 'vue';
import { RouterView,RouterLink } from 'vue-router';const newsList = reactive([{id:'cgp01',title:'今天周一',content:'嘻嘻'},{id:'cgp02',title:'今天周二',content:'不嘻嘻'},{id:'cgp03',title:'今天周三',content:'不不嘻嘻细'},{id:'cgp04',title:'今天周四',content:'不不不嘻嘻'}
])
</script>

8.query参数

我们发现上方实现的效果newscontent的数据是写死的，那怎么把数据传过去呢？

（1）传递参数

用to传参有两种写法：

   // News.vue  <ul><li v-for="news in newsList" :key="news.id"><!-- 第一种写法 模板字符串写法 冗杂 --><!-- <RouterLink :to="`/news/detail?id=${news.id}`">{{ news.title }}</RouterLink> --><!-- 第二种写法 对象写法 --><RouterLink :to="{// path:'/news/detail',name:'xiangqing',query:{id:news.id,title:news.title,content:news.content}}">{{ news.title }}</RouterLink></li></ul>

（2）接收参数

<template><ul class="news-list"><li>编号：{{query.id }}</li><li>标题：{{query.title}}</li><li>内容：{{query.content}}</li></ul>
</template><script setup lang="ts" name="About">
import { toRefs } from 'vue';
import { useRoute } from 'vue-router';
let route = useRoute()
// console.log(route);可以发现route上有我们需要的query参数
//解构让query参数等于route上面就不用写route.query.id
let { query } = toRefs(route) 
// 直接解构query一定丢失响应式，导致点两次导航区就不更新了
// 加上torefs是不让query丢失响应式
</script>

需要注意的是直接解构query一定会让其丢失响应式，导致点两次导航区就不更新了加上torefs是不让query丢失响应式。

9.params参数

第一种字符串：

<!-- params第一种 占位符+模板字符串 -->
<RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink>

记得一定要占位符

这里有个注意点，就是万一不想传content怎么办？就是在占位符后面加个？就好了

第二种对象：

需要注意的是不能用path

<!-- 第二种 对象 params --><RouterLink :to="{name: 'xiangqing', //用name跳转params: {id: news.id,title: news.title,content: news.title}}">{{ news.title }}</RouterLink>

备注1：传递`params`参数时，若使用`to`的对象写法，必须使用`name`配置项，不能用`path`。

备注2：传递`params`参数时，需要提前在规则中占位。

Detail.vue

10.路由的props配置

之前上面写的detail.vue很冗杂，我们可以利用props配置

（1）props布尔值写法

props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件（只能和params配合）

props:true

（2） props的函数写法（常用）

作用：把返回的对象中每一组key-value作为props传给Detail组件

（3）对象写法（少写）

作用：把对象中的每一组key-value作为props传给Detail组件

11.replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式。

2. 浏览器的历史记录有两种写入方式：分别为push和replace：

push是追加历史记录（默认值）。

replace是替换当前记录。

3. 开启`replace`模式：

<RouterLink replace .......>News</RouterLink>

添加replace之后不能前进后退

12.编程式导航

先来实现一个效果，点击首页看三秒之后自动跳转到新闻页面。其实这就是实现了一个简单的编程式路由导航效果。

//home.vue
<script setup lang="ts" name="Home">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
onMounted(() => {setTimeout(() => {router.push('/news')}, 3000)
})
</script>

那么接下来做一个复杂一点的：

在新闻页面的导航区增加按钮，通过点击按钮实现跳转。其实这也是现实开发中常用的编程时路由导航，而且一般都比routerlink使用的多。而且在vue2中用这个点击次数多可能会报错，但是在vue3中并不会。

//news.vue
<template><div class="news"><!-- 导航区 --><ul><li v-for="news in newsList" :key="news.id"><!-- 通过点击按钮实现路由跳转 --><button @click="showNewsDetail(news)">查看新闻</button><RouterLink :to="{name: 'xiang',query: {id: news.id,title: news.title,content: news.content}}">{{ news.title }}</RouterLink></li></ul><!-- 展示区 --><div class="news-content"><RouterView></RouterView></div></div>
</template><script setup lang="ts" name="News">
import { reactive } from 'vue'
import { RouterView, RouterLink, useRouter } from 'vue-router'const newsList = reactive([{ id: 'asfdtrfay01', title: '很好的抗癌食物', content: '西蓝花' },{ id: 'asfdtrfay02', title: '如何一夜暴富', content: '学IT' },{ id: 'asfdtrfay03', title: '震惊，万万没想到', content: '明天是周一' },{ id: 'asfdtrfay04', title: '好消息！好消息！', content: '快过年了' }
])const router = useRouter()
//写一个接口限制类型防止news报错
interface NewsInter {id: string,title: string,content: string
}function showNewsDetail(news: NewsInter) {router.replace({name: 'xiang',query: {id: news.id,title: news.title,content: news.content}})
}

效果：