本文涵盖了Vue.js面试中常见的问题，包括Vue指令如v-once、v-if/v-show、v-for、v-bind、v-model等的用法，双向数据绑定原理，路由跳转和传参方式，组件间的通讯，路由守卫的种类及使用场景，Vuex的状态管理和混入理解，插槽的使用，跨域解决方案以及API的封装心得。
24.Vue常见的指令有哪些，有什么用
v-once 能执行一次性地插值，当数据改变时，插值处的内容不会更新。只执行一次
v-show是给一个display：none的属性 让它不显示
v-if 是通过删除dom元素让他不在显示 同时还有v-else 必须和v-if使用
v-for 必须使用特定的语法(item, index) in items, index是索引，可以省略
v-html 渲染富文本 解析HTML代码和样式 v-text 替换元素里的内容
v-bind 属性绑定 用： v-on方法用@
v-model 双向数据绑定
25.双向数据绑定的原理
Model层上的数据和vue层上的数据一方变化另一方跟着变化
26.路由的跳转和传参有哪几种方式
声明式
不带参数
<router-link :to="{name: 'home' }" > </router-link>
带参数
<router-link to="{path:'/son1' ,query:{ id:'10' }}" >跳转</router-link>
函数式
不带参数
this.$router.push('/home')
带参数
name: "namelogin",
params: {
userid: 999,
name: "wangwu"
}
})
27.组件间的通讯方式有哪些
父子组件之间传参
父传子
父组件中：<sonComponentName sonAcceptValueName="10" />
子组件中：props:{
sonAcceptValueName:{
type:[Number,String,Object]/String
default:10
}
}
子传父
父组件中：<sonComponentName @fromSonEventType="fatherComponentFunctionName()" />
父组件中：methods:{
fatherComponentFunctionName(valueFromSon){
console.log(valueFromSon)
}
}
子组件中：<button @click="sendValueFunctonName()">发送数据</button>
子组件中：methods:{
sendValueFunctonName(){
this.$emit("fromSonEventType",valueFromSon)
}
28.谈一谈对路由守卫的理解（谈理解，一般就是总分总，它是什么，用在哪，有什么用，
怎么用，有什么注意事项，再结合项目说明更好）
路由守卫: 是router对象一个属性，本质上是一个函数。 在 路由切换 时，它 会被调用 ，用它就可以用来去检查凭证
vue-router全局有三个守卫：
1、router.beforeEach 全局前置守卫 进入路由之前
2、router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3、router.afterEach 全局后置钩子 进入路由之后
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
// 通常用于常见的登录权限验证
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
// 不能使用next()方法
console.log('afterEach 全局后置钩子');
）}
路由独享守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 调用顺序在全局前置守卫后面，不会被全局守卫覆盖
// ...
}
}
]
路由组件守卫
beforeRouteEnter 进入路由前
beforeRouteUpdate (2.2) 路由复用同一个组件时
beforeRouteLeave 离开当前路由时
beforeRouteEnter (to, from, next) {
// 在路由独享守卫后调用 不！能！获取组件实例 `this`，因为组件实例还没被创建
......
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
......
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
// 导航离开该组件的对应路由时调用，我们用它来禁止用户离开，
// 比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。
29.谈一谈对Vuex的理解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
核心模块
有五部分组成它们分别是State（Vuex的数据仓库）、Mutations（只能在mutations中修改state的数据状态）、Actions（异步改变共享数据）和Getters（获取state二次处理的数据）
30.谈一谈对混入的理解
混入 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 一个混入对象可以包含任意组件选项。 当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 官方文档说的很详细，通俗易懂的话来说一个.vue文件由template，script，style组成，混入的方法可以把mixin这个对象和.vue文件的script里面的内容“混入”（mixin对象的结构和.vue的script里面的结构一样），既此组件既可以调用组件内部的script，也可以调用混入对象。 场景运用： 有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性。 他们可能会公用一部分业务逻辑，但是他们的页面结构又不相同。
31.谈一谈对插槽的理解
slot是组件内的一个占位符，该占位符可以在后期使用自己的标记语言填充。
让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式，
插槽有分为普通插槽和具名插槽
父组件中
普通插槽
<Category>
<div>html结构</div>
</Category>
//子组件中：
<template>
<div>
<slot>插槽的默认内容</slot>
</div>
</template>
具名插槽
<template v-slot:header>免费</template>
<template v-slot:footer>底部</template>
<h2> <slot name="header"></slot>课程</h2>
32.什么是跨域，如何解决
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。. 因此：跨域问题 是针对ajax的一种限制。
配置代理
module.exports = {
devServer: {
proxy: {
"/api": {
"target": "https://course.myhope365.com",
"pathRewrite": {
"^/api": ""
},
"/login-api": {
"target": "https://course.myhope365.com",
"pathRewrite": {
"^/login-api": ""
}
}
}
}
}
}
33.谈一谈封装请求的心得
1、将所有url地址封装到对象中 可以做适当操作和修饰 最后导出 2、引入封装好的url对象 将请求函数封装进一个对象中 封装的函数的参数需要是带有处理返回结果函数的对象 便于调用者接受请求结果
api的封装要用到axios模块。所以那我们在创建好vue脚手架后需要安装axios依赖包（指令：npm i axios --save）。
api的封装主要的目的就是：在帮助我们简化代码和后期的更新维护。
2521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
