Vue笔记（四）
一、插槽
（一）默认插槽
1. 插槽概念：在Vue组件中，插槽是一种分发内容的机制，允许在父组件中向子组件传递HTML或组件片段。默认插槽是最基础的插槽类型。
2.使用场景：当子组件有预留区域，需要父组件填充不同内容时，可使用默认插槽。比如创建通用的布局组件，像弹窗、卡片等，父组件能定制内部展示内容。
3.语法示例
子组件定义：在子组件模板中，使用 <slot> 标签定义插槽位置。例如
<template>
<div class="card">
<h2>卡片标题</h2>
<slot></slot>
</div>
</template>
父组件使用：在父组件中，直接在子组件标签内写入要插入的内容。
<template>
<div>
<MyCard>
<p>这是插入到卡片默认插槽的内容。</p>
</MyCard>
</div>
</template>
<script>
import MyCard from './MyCard.vue';
export default {
components: {
MyCard
}
};
</script>
5.若父组件未向默认插槽传入内容，子组件可设置默认显示内容；默认插槽只能有一个，如果有多个不同内容区域，需使用具名插槽或作用域插槽。
（二）后备内容
1.定义：后备内容是指在父组件未给子组件插槽提供内容时，子组件插槽内显示的默认内容。在 <slot> 标签内定义的内容就是后备内容，它增强了组件的灵活性和可用性。
2.作用：防止插槽在未被填充时出现空白，为组件提供默认展示信息，提升用户体验。同时，让组件在不同使用场景下都能保持一定的完整性，避免因父组件未传入内容而导致的显示异常。
3.语法
子组件：在子组件的 <slot> 标签间编写后备内容。例如，创建一个 MyBox.vue 组件：
html
<template>
<div class="my - box">
<slot>这是没有传入内容时显示的后备内容</slot>
</div>
</template>父组件：若父组件使用 MyBox 组件时未提供插槽内容，就会显示后备内容；若提供了，则显示父组件传入的内容。
html
<template>
<div>
<!-- 不传入内容，显示后备内容 -->
<MyBox></MyBox>
<!-- 传入内容，覆盖后备内容 -->
<MyBox><p>这是父组件传入的内容</p></MyBox>
</div>
</template>
<script>
import MyBox from './MyBox.vue';
export default {
components: {
MyBox
}
};
</script>（三）具名插槽
1.具名插槽的定义与作用：当一个组件需要多个不同位置来接收父组件传递的内容时，使用具名插槽。通过给 <slot> 元素添加 name 属性来创建具名插槽，方便区分不同的插入位置，实现更复杂的组件内容定制。
2.具名插槽的使用方法
子组件定义具名插槽：在子组件模板内，用 name 属性标识不同插槽。例如在 MyComponent.vue 中：
html
<template>
<div>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
</template>父组件使用具名插槽：在父组件中，使用 <template> 标签的 v - slot 指令（Vue2中也可用 slot 指令），指定要插入的具名插槽名称。示例如下：
html
<template>
<div>
<MyComponent>
<template v - slot:header>
<h1>页面头部</h1>
</template>
<template v - slot:body>
<p>页面主体内容</p>
</template>
<template v - slot:footer>
<p>页面底部版权信息</p>
</template>
</MyComponent>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
};
</script>（四）作用域插槽
1.作用域插槽的定义与作用：作用域插槽打破了子组件与父组件之间单向数据流动的常规模式，使子组件能将自身数据“传递”给父组件在插槽中使用。当子组件提供的数据需要在父组件插槽内容中根据不同逻辑进行展示时，作用域插槽就派上用场了，比如列表项的展示样式根据父组件的需求进行定制。
2.使用方法
子组件定义：在子组件中，将数据绑定到 <slot> 标签上。例如，有一个 MyList.vue 子组件展示列表：
html
<template>
<ul>
<li v-for="item in list" :key="item.id">
<slot :data="item">{
{ item.name }}</slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' }
]
};
}
};
</script>父组件使用：在父组件中，通过 v-slot 指令接收子组件传递的数据，并进行相应展示
html
<template>
<div>
<MyList>
<template v-slot:default="slotProps">
<span>{
{ slotProps.data.name }} - 价格未知</span>
</template>
</MyList>
</div>
</template>
<script>
import MyList from './MyList.vue';
export default {
components: {
MyList
}
};
</script>二、组件目录存放问题
1.组件分类的重要性：随着项目规模扩大，组件数量增多，若缺乏合理分类，项目结构会变得混乱，导致组件查找、维护困难。合理分类可提高开发效率，方便团队协作，新成员也能快速熟悉项目结构。
（一）常见的组件分类方式
1.按功能分类：依据组件在项目中实现的功能进行划分，如将负责用户认证功能的组件放在 auth 目录下，包括登录、注册组件；将商品展示相关组件放在 product - display 目录，如商品列表、详情组件。这种方式使功能模块清晰，便于开发和维护特定功能时查找组件。
2.按页面分类：根据组件所属页面来组织，把首页用到的组件都放在 home - components 目录，购物车页面组件放在 cart - components 目录。在开发特定页面时，能迅速定位到相关组件，适合页面差异大、组件复用性低的项目。
3.按通用程度分类：把通用组件（如按钮、表单、弹窗等）放在 common 目录，这些组件在多个页面和功能模块频繁使用；业务特定组件（仅在某个业务流程或功能中使用）放在相应业务目录。通用组件便于统一管理和维护样式与功能，业务组件聚焦特定业务逻辑。
三、路由
（一）单页应用程序&路由介绍
单页应用程序（SPA）
1.定义与特点：单页应用程序在加载后，仅依靠一个HTML页面构建用户界面。其通过动态更新页面部分内容与用户交互，而非每次操作都重新加载整个页面。优点是用户体验流畅，响应速度快；缺点是初次加载耗时，不利于SEO（搜索引擎优化）。
2.工作原理：借助JavaScript框架（如Vue）实现。页面首次加载时，HTML、CSS、JavaScript文件被下载到本地。后续交互中，JavaScript拦截浏览器操作，根据用户行为动态修改DOM元素，呈现不同内容。例如点击导航菜单，通过操作DOM切换页面显示区域内容，而非重新请求新页面。
路由
1.概念与作用：路由用于管理SPA中不同页面视图与URL的对应关系。它决定了用户在输入特定URL或点击链接时，应用程序展示的内容。用户可通过URL访问特定功能页面，实现页面间灵活切换，提升应用程序的导航性和用户体验。
2.路由模式：常见的有哈希模式（ hash ）和历史模式（ history ）。哈希模式通过URL中的哈希值（ # 后的内容）识别页面状态，兼容性好，但URL不美观。历史模式利用HTML5的 history API 实现，URL更简洁，不过需要服务器配置支持，否则在直接访问页面时可能出现404错误。
3.Vue中的路由使用：在Vue项目中，通过引入 vue-router 插件实现路由功能。先创建路由组件，定义不同页面的视图；然后配置路由表，将URL路径与组件进行映射；最后在主应用程序中使用路由组件，实现页面的动态切换。
4.使用路由链接和视图：在应用的模板中，使用 <router-link> 组件创建导航链接。它会渲染成一个 <a> 标签，点击时会根据 to 属性指定的路径进行路由切换。例如 <router-link to="/">首页</router-link> 。 <router-view> 则是路由组件的展示区域，根据当前路由匹配的结果，显示对应的组件内容。
（二）路由的基本使用
1.安装和引入vue-router：在Vue项目中，通过npm或yarn安装 vue-router 。以npm为例，在项目根目录下运行 npm install vue-router 。安装完成后，在项目入口文件（通常是 main.js ）中引入并配置 vue-router 。在Vue2里，使用 Vue.use(VueRouter) 来注册插件；Vue3中，创建路由实例并通过 app.use(router) 挂载到Vue应用上。
2.创建路由组件：为每个需要通过路由访问的页面创建独立的Vue组件。比如创建 Home.vue 和 About.vue 组件，分别定义不同的页面内容。这些组件的模板 <template> 包含HTML结构， <script> 设置数据和方法， <style> 添加样式。
3.配置路由表：在单独的路由配置文件（如 router.js ）中定义路由表。路由表是一个数组，每个元素代表一条路由规则，包含 path （路径）和 component （对应的组件）两个关键属性。例如：
avascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
});（三）路由的模块封装
1.路由模块封装的目的：将路由相关的配置和逻辑进行集中管理，使代码结构更清晰，方便后续的维护和扩展。避免路由配置分散在多个文件中，降低修改路由规则时出错的概率，同时提高开发效率。
2.路由模块封装步骤
创建路由模块文件：在项目中新建专门的路由模块文件，如 router.js 。在Vue2项目中，先引入 Vue 和 VueRouter ，并使用 Vue.use(VueRouter) 来安装路由插件；Vue3项目中则是创建路由实例并进行相关配置。
3.配置路由规则：在路由模块文件中定义路由表，每个路由规则包含 path （路由路径）和 component （对应的组件）等属性。如果有嵌套路由，还需配置 children 属性。例如：
javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = new VueRouter({
routes
});
export default router;4.挂载路由模块：在项目的入口文件（ main.js ）中引入并挂载路由模块。Vue2项目中直接将路由实例挂载到 new Vue() 中；Vue3项目则通过创建的 app 实例使用 app.use(router) 方法挂载路由。
（五）路由重定向
1.路由重定向的概念：路由重定向是指当用户访问某个路由时，自动将其导航到另一个指定路由。在Vue Router中，可在路由配置时设置重定向规则，这一功能在项目中用于统一入口、优化URL结构等场景。
2.路由重定向的配置方式
在路由表中配置：在路由配置文件（如 router.js ）的路由表数组中进行设置。例如，若想让用户访问根路径 / 时，自动跳转到 /home 页面，在Vue2和Vue3中的配置类似：
javascript
// Vue2
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
}
]
});
// Vue3
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
}
]
});
export default router;通过别名实现重定向效果：在路由配置中使用 alias 属性。例如：
javascript
{
path: '/about',
component: About,
alias: '/information'
}四、使用router-link替代a标签实现高亮
1.router-link 基础： router-link 是Vue Router提供的组件，用于创建路由链接。相比原生 <a> 标签，它能与Vue Router更好集成，实现动态路由切换。使用时，通过 to 属性指定目标路由路径，会被渲染成 <a> 标签。
2.实现高亮的原理：Vue Router为当前激活（即用户访问路径与路由路径匹配）的 router-link 添加特殊类名。在Vue2中，默认类名是 router-link - active ；Vue3里，可在创建路由实例时通过 linkActiveClass 属性自定义。利用这个类名，能在CSS中设置样式，实现导航链接高亮。
3.操作步骤
替换链接标签：将页面导航中的 <a> 标签换成 router-link 。例如，原导航链接 <a href="/home">首页</a> ，替换为 <router-link to="/home">首页</router-link> 。
设置高亮样式：在CSS文件中针对激活类名编写样式。如：
css
.router-link-active {
color: red;
font - weight: bold;
}4.自定义激活类名（Vue3）：若想使用自定义类名，在路由配置文件中设置 linkActiveClass 。假设自定义类名为 active - link ，代码如下：
javascript
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [],
linkActiveClass: 'active-link'
});
export default router;五、自定义匹配的类名
1.自定义类名的作用：默认情况下，Vue Router在路由匹配时会给 router-link 添加特定类名（Vue2中为 router-link-active ，Vue3可自定义），但在实际项目中，默认类名可能与现有样式冲突，或无法满足多样化的设计需求。通过自定义匹配类名，开发者能精准控制激活路由链接的样式，实现更个性化的页面效果。
2.Vue2中自定义类名的方法：在Vue2项目里，通过修改全局配置来自定义类名。在引入Vue Router后，使用 VueRouter.prototype.options.linkActiveClass 来指定新的类名。例如：
javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 将激活类名自定义为'my-active'
VueRouter.prototype.options.linkActiveClass ='my-active';3.Vue3中自定义类名的方法：Vue3使用 createRouter 创建路由实例时，可通过配置对象的 linkActiveClass 属性来自定义类名。示例如下：
javascript
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [],
linkActiveClass:'my - custom - active' // 自定义激活类名
});
export default router;六、导航
（一）声明式导航--跳转传参
1.声明式导航概述：在Vue中，声明式导航通过 router-link 组件实现。与原生HTML的 <a> 标签不同， router-link 能和Vue Router更好集成，实现基于路由的页面导航。使用时，通过 to 属性指定目标路由路径，如 <router-link to="/home">首页</router-link> 。
2.跳转传参的方式
params传参：在 router-link 的 to 属性中以对象形式传递参数。例如，假设存在一个 user 路由，需要传递用户ID： <router-link :to="{ name: 'user', params: { id: 123 } }">查看用户</router-link> 。在目标组件中，可通过 $route.params 获取参数，在Vue2里，在 created 钩子函数中用 this.$route.params.id 获取；Vue3中，使用 useRoute 组合式函数获取，即 import { useRoute } from 'vue-router'; const route = useRoute(); const id = route.params.id; 。
query传参：同样以对象形式传递，但参数会显示在URL的查询字符串中。如 <router-link :to="{ path: '/search', query: { keyword: '苹果' } }">搜索</router-link> 。在目标组件中，通过 $route.query 获取参数，Vue2和Vue3获取方式类似，如 this.$route.query.keyword 或 route.query.keyword 。
3.传参的应用场景：params传参适合传递标识性参数，像用户ID、文章ID等，在路由路径中体现，使URL更具语义化。query传参常用于传递临时性、非标识性参数，如搜索关键词、筛选条件等，这些参数在URL中可见，方便分享链接并携带筛选状态。
（二）编程式导航--两种路由跳转方式
1.程式导航简介：与声明式导航（如 <router-link> ）不同，编程式导航通过JavaScript代码实现路由跳转，能更灵活地控制跳转时机和逻辑，常用于用户操作触发或复杂业务逻辑中的页面导航。
2. 方法（Vue2）：在Vue2组件内，使用 this.$router.push 方法实现路由跳转。它会向历史记录栈添加一个新记录，用户可通过浏览器的后退按钮返回上一页。该方法可接收字符串路径或包含路径、参数等信息的对象作为参数。
3.传递字符串路径：例如 this.$router.push('/home') ，可直接跳转到 /home 路由对应的页面。
4. 传递对象参数：当需要传递参数时，可使用对象形式。如 this.$router.push({ name: 'user', params: { id: 1 } }) ，跳转到名为 user 的路由，并传递 id 为1的参数。在目标组件中可通过 this.$route.params.id 获取该参数。
5. router.push 方法（Vue3）：在Vue3中，由于组件实例不再直接挂载 $router ，需借助 useRouter 组合式函数获取 router 实例。引入 useRouter 后，调用 router.push 方法进行跳转，用法与Vue2类似。例如：
javascript
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const goToHome = () => {
router.push('/home');
};
return {
goToHome
};
}
};七、面经基础版
（一）案例效果分析
（二）路由配置
1.路由配置基础概念：在Vue项目里，路由配置用于设定URL和组件间的对应关系，实现单页应用（SPA）中不同页面的切换。借助 vue-router 插件完成配置，它让用户通过操作URL，在不重新加载整个页面的情况下，展示不同组件内容。
2.Vue2路由配置步骤
安装与引入插件：使用 npm install vue-router 安装，在 main.js 里引入 Vue 和 VueRouter ，并通过 Vue.use(VueRouter) 启用插件。
定义路由组件：创建不同的Vue组件，像 Home.vue 、 About.vue 等，作为路由对应的页面内容。
配置路由表：在单独的 router.js 文件中，定义包含 path （路由路径）和 component （对应的组件）的路由规则数组。比如：
javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
}); 3.挂载路由：在 main.js 中，将路由实例挂载到Vue实例上，使路由生效。
4.Vue3路由配置差异：创建路由实例方式不同，使用 createRouter 和 createWebHistory （或 createWebHashHistory ）函数。例如：
javascript
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
});
export default router;（三）传参
1.首页请求渲染的重要性：首页是用户访问应用的入口，其加载速度和数据展示效果直接影响用户体验。合理的首页请求渲染机制能确保用户快速获取关键信息，提升应用的吸引力和留存率。在面试中，考察首页请求渲染相关知识，可检验开发者对数据请求、组件渲染及Vue生命周期的掌握程度。
2.Vue2中首页请求渲染流程
数据请求时机：通常在组件的 created 或 mounted 生命周期钩子函数中发起数据请求。 created 阶段组件实例已创建，可访问数据和方法，但DOM未挂载； mounted 阶段DOM已挂载完成。若数据用于填充页面内容，且不依赖DOM操作，在 created 中请求可节省时间。
数据请求方法：使用 axios 等HTTP库发送请求。例如，在 created 钩子函数中：
javascript
import axios from 'axios';
export default {
created() {
axios.get('/api/homeData')
.then(response => {
this.homeData = response.data;
})
.catch(error => {
console.error('请求失败:', error);
});
},
data() {
return {
homeData: null
};
}
};3. 数据渲染到页面：通过Vue的模板语法，如 v - for 遍历数组展示列表数据， { {}} 插值表达式显示普通数据。例如，若 homeData 是包含商品列表的数组，在模板中可这样渲染：
html
<template>
<div>
<ul>
<li v - for="item in homeData" :key="item.id">{
{ item.name }}</li>
</ul>
</div>
</template>3. 数据渲染到页面：通过Vue的模板语法，如 v - for 遍历数组展示列表数据， { {}} 插值表达式显示普通数据。例如，若 homeData 是包含商品列表的数组，在模板中可这样渲染：
javascript
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
setup() {
const homeData = ref(null);
const fetchHomeData = async () => {
try {
const response = await axios.get('/api/homeData');
homeData.value = response.data;
} catch (error) {
console.error('请求失败:', error);
}
};
onMounted(() => {
fetchHomeData();
});
return {
homeData
};
}
};（四）详情页渲染
查询参数
1. 概念与用途：查询参数是在URL的查询字符串中传递数据，格式为 ?key1=value1&key2=value2 。常用于传递临时性、非关键的数据，如搜索关键词、筛选条件等。用户可通过修改URL直接调整参数，方便分享链接并保留筛选状态。
2. 传递与获取（Vue2）
在Vue2中，使用 router - link 或编程式导航传递查询参数。例如，声明式导航 <router - link :to="{ path: '/search', query: { keyword: '苹果' } }">搜索</router - link> ；编程式导航 this.$router.push({ path: '/search', query: { keyword: '苹果' } }) 。在目标组件中，通过 this.$route.query 获取参数，如 this.$route.query.keyword 。
3.传递与获取（Vue3）
Vue3中，声明式导航用法类似，编程式导航需借助 useRouter 组合式函数。例如， import { useRouter } from 'vue - router'; const router = useRouter(); router.push({ path: '/search', query: { keyword: '苹果' } }); 。获取参数时，用 useRoute 函数，如 import { useRoute } from 'vue - router'; const route = useRoute(); const keyword = route.query.keyword; 。
动态路由
1.概念与用途：动态路由通过在路由路径中使用参数占位符，实现不同参数对应同一组件展示不同内容。常用于展示详情页，如用户详情页、商品详情页等，根据不同ID展示对应信息，使URL更具语义化和可读性。
2.配置与传递（Vue2）
在路由配置文件（如 router.js ）中定义动态路由，如 { path: '/user/:id', component: UserComponent } 。传递参数时， router - link 可写成 <router - link :to="{ name: 'user', params: { id: 1 } }">用户详情</router - link> ，编程式导航则是 this.$router.push({ name: 'user', params: { id: 1 } }) 。
3.配置与传递（Vue3）
Vue3路由配置类似， { path: '/user/:id', component: UserComponent } 。传递参数时，声明式和编程式导航用法与Vue2类似，只是编程式导航获取 router 实例方式不同。获取参数时，Vue2用 this.$route.params.id ，Vue3用 import { useRoute } from 'vue - router'; const route = useRoute(); const id = route.params.id; 。
（五）缓存组件
1.缓存组件的目的：在Vue应用中，频繁切换组件可能导致重复渲染，消耗性能。缓存组件能将已渲染的组件状态保存，再次访问时直接使用缓存，避免重复创建和销毁组件，减少数据请求和计算开销，加快页面响应速度，优化用户体验。
2.Vue2中缓存组件的方法：使用 <keep-alive> 组件。它是一个抽象组件，不会在DOM中渲染实际元素。将需要缓存的组件包裹在 <keep-alive> 内，例如：
html
<keep-alive>
<router-view></router-view>
</keep-alive>Vue2中缓存组件的生命周期变化：被 <keep-alive> 缓存的组件，其生命周期钩子会有所变化。 created 和 mounted 在首次加载时执行，再次访问缓存组件时不会重复执行。新增 activated 和 deactivated 钩子， activated 在组件被激活（从缓存中取出并显示）时调用， deactivated 在组件被缓存（离开页面）时调用。可以在这两个钩子中进行数据更新、状态恢复等操作。
Vue3中缓存组件的方法与差异：Vue3同样使用 <keep-alive> 组件进行缓存。在组合式API中，可通过 onActivated 和 onDeactivated 函数替代Vue2中的 activated 和 deactivated 钩子。例如：
javascript
import { onActivated, onDeactivated } from 'vue';
export default {
setup() {
onActivated(() => {
// 组件被激活时执行的逻辑
});
onDeactivated(() => {
// 组件被缓存时执行的逻辑
});
}
};