2020年vue常见面试题汇总
vue相关
1.vue生命周期
什么是Vue生命周期？
vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译、挂载DOM——渲染、更新——渲染、卸载等一系列过程为Vue的生命周期。
下面是vue生命周期的图片
vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，他可以让我们在控制整个vue的过程中可以形成良好的逻辑。
vue生命周期分几个阶段？
8个阶段，创建前/后、载入前/后、更新前/后、销毁前/后。
第一次页面加载触发那几个钩子？
beforeCreate、created、beforeMount、mounted
DOM渲染在哪个周期中就已经完成？
在mounted中就已经渲染完成。
2.v-show和v-if的区别
v-show控制css层叠样式，v-if直接操作DOM元素
使用场景：频繁切换建议使用v-show，切换不频繁使用v-if。按需使用。
3.MVVM相关
vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
- MVVM
- M - Model，Model 代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑
- V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来
- VM - ViewModel，ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View
- View 接收用户交互请求
- View 将请求转交给ViewModel
- ViewModel 操作Model数据更新
- Model 更新完数据，通知ViewModel数据发生变化
- ViewModel 更新View数据
4.computed 和 watch 的区别和运用的场景？
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值； \
watch： 更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；
5.v-model 是这么实现双向绑定的？
我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
例如：
<input v-model="dataVal" />
相当于
<input :value="dataVal" v-on:input="this.dataVal = e.target.value">
6.Vue 组件 data 为什么必须是函数 ?
因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染,产生副作用。
所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,因此不存在以上问题。
7.vue组件之间通讯
(1) props / $emit 适用 父子组件通****信
(2) vuex
8.Vuex 的理解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。可以理解成全局的公共状态
- State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
- Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
- Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
- Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
（1）vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。\
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化。且必须是同步函数
（3）Action用于提交Mutation，并非直接改变State，他可以进行任何 异步操作，比如axios请求。
（4）getter 相当于store中的计算属性。
9.vue-router 的理解
导航钩子函数（路由守卫）
- 全局后卫
- router.beforeEach 全局前置守卫 进入路由之前
- router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
- router.afterEach 全局后置钩子 进入路由之后
// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局后置钩子');
});
- 路由独享的守卫 你可以在路由配置上直接定义 beforeEnter 守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
- 组件内的守卫 你可以在路由组件内直接定义以下路由导航守卫
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用，我们用它来禁止用户离开
// 可以访问组件实例 `this`
// 比如还未保存草稿，或者在用户离开前，
将setInterval销毁，防止离开之后，定时器还在调用。
}
}