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

最新推荐文章于 2024-08-10 17:23:29 发布

椰果uu

最新推荐文章于 2024-08-10 17:23:29 发布

阅读量1.6k

点赞数 39

分类专栏： Vue.js 文章标签：前端 vue.js 路由 hooks vue3 生命周期

本文链接：https://blog.csdn.net/m0_73560798/article/details/137718334

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

这里终于明白了为什么一直有这个语法报错，就是在提示你哪里错的地方上方注释一行/*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(),//路由器的工作模式history
  routes: [//引入路由规则
    {
      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
        }
    })
}

效果：