Vue 面试题

---

前言

万卷不离其宗，面试造火箭，入门拧螺丝

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么事MVVM？

• MVVM 是Model-View-ViewModel的缩写，是一种脱胎于 MVC 模式的设计模式
• Model 代表数据层，负责存放业务相关的数据
• View 代表视图层，负责在页面上展示数据
• ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

二、组件间通信 常用的

1.父传子通信 props

代码如下（示例）：

**父组件代码**
<template>
    <header-box :title-txt="showTitleTxt"></header-box>
</template>
<script>
    import Header from './header'
    export default {
        name: 'index',
        components: {
            'header-box': Header
        },
        data () {
            return {
                showTitleTxt: '首页'
            }
        }
    }
</script>


**子组件代码**
<template>
    <header>
        {{thisTitleTxt}}
    </header>
</template>
<script>
    export default {
        name: 'header-box',
        props: {
            titleTxt: String
        },
        data () {
            return {
                thisTitleTxt: this.titleTxt
            }
        }
    }
</script>

2.子传父 $emit

代码如下（示例）：

子组件用 $emit(‘参数名’,参数值) 发送参数，父组件 @参数名(e) 获取传过来的值

*通过$emit*
**父组件代码**
<template>
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter @:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
    import buttonCounter from './buttonCounter'
    export default {
        name: 'index',
        components: {
         	buttonCounter
        },
        data () {
            return {
                total: 0
            }
        },
        methods: {
            incrementTotal (e) {
              	//这里接收子组件参数
              
            }
        }
    }
</script>


**子组件代码**
<template>
    <button @click="incrementCounter">{{counter}}</button>
</template>
<script>
    export default {
        name: 'button-counter',
        data () {
            return {
                counter: 0
            }
        },
        metheds: {
            incrementCounter () {
         		this.counter++
         		//可以传对象 
                this.$emit('increment',this.counter)
            }
        }
    }
</script>

3.跨组件传参

1. 可以用时间总线 （项目小用这个省事）

let bus =new Vue()
Vue.prototype.bus = bus

2. vuex 状态管理工具 （项目大建议用vuex） vuex.vuejs.org/zh/guide/ v…
3. 或者一级一级传过去再传回来 （费事建不建议）

---

三、生命周期

• beforeCreate：vue实例的挂载元素el和数据对象data都是undefined，还没用初始化
• created：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
• beforeMount：vue实例的el和data都初始化了，但是挂载之前未虚拟DOM节点
• mounted：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
• beforeupdated：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动一处已添加的事件监听器
• updated：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
• beforeDestroy：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
• destroyed：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

---

四、 vue组件中data必须是一个函数

1.如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。

2.如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

---

五、Vue 中 v-if 和 v-show 有什么区别？

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。. v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。 一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

---

六、Vue 中 computed 和 watch 有什么区别？

计算属性 computed：

1. 支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
2. 计算属性内不支持异步操作；
3. 计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
4. 计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：

1. 不支持缓存，只要数据发生变化，就会执行侦听函数
2. 侦听属性内支持异步操作；
3. 侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；
4. 监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

---

七、$nextTick 是什么Vue

实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM

---

八、v-for 中 key 的作用是什么？

key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率

---

九、Vue 的双向数据绑定原理是什么？

Vue 采用数据劫持+订阅发布模式实现双向绑定。通过 Object.defineProperty()方法来为组件中 data 的每个属性添加 get 和 set 方法，在数据变动时，触发 set 里相应的监听回调函数，将变动信息发布给订阅者

步骤如下：

1.组件初始化时：

• 创建一个dep 对象作为观察者（依赖收集、订阅发布的载体）；

• 通过Object.defineProperty()方法对 data 中的属性及子属性对象的属性，添加 getter 和 setter 方法； 调用 getter 时，便去 dep 里注册函数。调用 setter 时，便去通知执行刚刚注册的函数。

2、组件挂载时：

• compile解析模板指令，将其中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定上更新函数、监听函数。后续一旦数据发生变化，便会更新页面。页面发生变化时也会相应发布变动信息；

• 组件同时会定义一个watcher 类作为订阅者，watcher 可以视作 dep 和组件之间的桥梁。其在实例化时会向 dep 中添加自己，同时自身又有一个 update 方法，待收到 dep 的变动通知时，便会调用自己的 update 方法，触发 compile 中的相应函数完成更新

---

十、如何动态更新对象或数组的值？

因为 Object.defineProperty()的限制，Vue 无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过 this.$set 方法来解决：

this.$set(要改变的数组/对象，要改变的位置/key，要改成的value)

this.$set(this.arr, 0, "OBKoro1");
// 改变数组 
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

数组原生方法造成的数据更新，可以被 Vue 监听到。如 splice()push()pop()等。

---

十一、常用的事件修饰符有哪些？

.stop 阻止冒泡事件
.prevent  阻止默认事件
.self 仅绑定元素自身出发
.once 只触发一次
<div id="app2">
	<!-- 阻止单击事件冒泡 -->
	<a v-on:click.stop="doThis"></a>
	
	<!-- 提交事件不再重载页面 -->
	<form v-on:submit.prevent="onSubmit"></form>
	
	<!-- 修饰符可以串联  -->
	<a v-on:click.stop.prevent="doThat"></a>
	
	<!-- 只有修饰符 -->
	<form v-on:submit.prevent></form>
	
	<!-- 添加事件侦听器时使用时间捕获模式 -->
	<div v-on:click.capture="doThis">...</div>
	
	<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
	<div v-on:click.self="doThat">...</div>
</div>

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
number：将输出字符串转为Number类型·
（虽然type类型定义了是number类型，但是如果输入字符串，输出的是string）
<input v-model.number="age" type="number">

---

十二、Vue 如何获取 DOM 元素？

首先先为标签元素设置 ref 属性，然后通过 this.$refs.属性值获取。

<div ref="test"></div>

<script>
const dom = this.$refs.test
</script>

---

十三、v-on 如何绑定多个事件？

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">

---

十四、Vue 初始化页面闪动问题如何解决？

//出现该问题是因为在 Vue 代码尚未被解析之前，尚无法控制页面中 DOM 的显示，
所以会看见模板字符串等代码。
//解决方案是，在 css 代码中添加 v-cloak 规则，同时在待编译的标签上添加 v-cloak 属性：

<style>
 [v-cloak] { display: none; }
</style>
<div v-cloak>
 {{ message }}
</div>


//或者组件用 template 包裹起来
<template></template>

---

十五、Vue 如何清除浏览器缓存？

1. 项目打包的时候给每个打包文件加上 hash 值，一般是在文件后面加上时间戳；
2. 在 html 文件中加入 meta 标签，content 属性设置为no-cache;
3. 在后端服务器中进行禁止缓存设置

---

十六、Vue-router 路由有哪些模式？

1. hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。
2. history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

---

十七、ue-cli 项目中 assets 和 static 文件夹有什么区别？

两者都是用于存放项目中所使用的静态资源文件的文件夹。其区别在于： ** assets 中的文件在运行 npm run build 的时候会打包**，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到 static 中。static 中的文件则不会被打包。

---

十八、Vuex 是什么？有哪几种属性？

Vuex 是专为Vue设计的状态管理工具，采用集中式储存管理 Vue 中所有组件的状态。

1. state属性：基本数据；
2. getters属性：从 state 中派生出的数据；
3. mutation属性：**更新 store 中数据的唯一途径，**其接收一个以 state 为第一参数的回调函数；

const store = new Vuex.Store({
  state: {
    count: 1,
  },
  mutations: {
    increment(state) {
      // 变更状态
      state.count++;
    },
  },
});

4. action 属性：提交 mutation 以更改 state，其中可以包含异步操作；

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment2(context) {
      context.commit('increment');
    },
    fun(context) {
      context.dispatch('increment2');
    },
  },
});

5. module 属性：用于将 store分割成不同的模块。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

---

十九、说一下v-model的原理

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

---

二十、Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

• 生成AST树

• 优化

• codegen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。 编译的最后一步是将优化后的AST树转换为可执行的代码

二十一、Vue中组件生命周期调用顺序

• 组件的调用顺序都是先父后子,渲染完成的顺序是先子后父
• 组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount
- >子mounted->父mounted

子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程
父 beforeUpdate -> 父 updated

销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

二十二、vue路由传参到底有几种方式

有两种:
query和params

query和params的区别：

params传参只能由name引入路由，如果写成path页面会显示undefined报错。
query传参的话可以使用path也可以使用name引入路由，不过建议使用path引入路由。

二十三 、keep-alive 的作用

1. 在 vue 项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果 之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候 会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索 的结果列表,这时候就需要用到 vue 的 keep-alive 技术了.
2. 在 router-view 上使用可以缓存该路由组件
3. 有两个参数 include - 字符串或正则表达，只有匹配的组件会被缓存 exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

二十四 、 数据持久化

vuex里面存放的数据，页面一经刷新会丢失

存放在localStorage或者sessionStorage里面，
进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取

二十五、promise 是什么？有哪些状态和参数？如何使用？

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作 promise，帮助我们处理队列

promise 有三个状态：

1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败

resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即 从 pending 变为 resolved），
在异步操作成功时调用，并将异步操作的结果， 作为参数传递出去；

reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），
在异步操作失败时调用，并将异步操作报出的错 误，作为参数传递出去

当 promise 状态发生改变，就会触发 then()里的响应函数处理后续步骤；
promise 状态一经改变，不会再变。
Promise 对象的状态改变，只有两种可能： 从 pending 变为 fulfilled 从 pending 变为 rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

二十六、vue3.0 与 vue2.0 的区别

1、性能提升 一句话简介：
更小巧，更快速；支持摇树优化；支持 Fragments 和跨组件渲 染；支持自定义渲染器。

2、API 变动 一句话介绍：
除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变 或者将通过另外构建一个兼容包 来兼容 2.x。
 模板语法的 99% 将保持不变。除了 scoped slot 语法可能会有一些微调之 外变动最大的部分将是渲染函数
 (render) 中的虚拟 DOM 的格式。

3、重写虚拟 DOM (Virtual DOM Rewrite)
随着虚拟 DOM 重写，减少 运行时（runtime）开销。重写将包括更有效的 代码来创建虚拟节点。

二十七 、vue路由钩子函数

路由的钩子函数总结有6个

全局的路由钩子函数：beforeEach、afterEach

单个的路由钩子函数：beforeEnter

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

全局导航钩子函数

1、vue router.beforeEach（全局前置守卫）

beforeEach的钩子函数，它是一个全局的before 钩子函数，

（beforeEach）意思是在 每次每一个路由改变的时候都得执行一遍。

它的三个参数：

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）

from: (Route路由对象) 当前导航正要离开的路由

next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) ***必须调用

next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        //判断该路由是否需要登录权限
        if (cookies('token')) {
            //通过封装好的cookies读取token，如果存在，name接下一步如果不存在，那跳转回登录页
            next()//不要在next里面加"path:/",会陷入死循环
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}//将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next()
    }

最后、你都做过哪些Vue的性能优化

编码阶段

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时使用事件代理
• SPA 页面采用keep-alive缓存组件
• 在更多的情况下，使用v-show替代v-if
• key保证唯一
• 使用路由懒加载、异步组件
• 防抖、节流第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载

SEO优化

• 预渲染
• 服务端渲染SSR

打包优化

• 压缩代码
• Tree Shaking/Scope Hoisting
• 使用cdn加载第三方模块
• 多线程打包happypack
• splitChunks抽离公共文件
• sourceMap优化

用户体验

• 骨架屏
• PWA

总结

心动不如行动，年复一年的当初的棱角渐渐被打磨，既然想就逼着自己去做。加油！

我这里总结的可能不是太完善，还有什么评论区说下 我加上，一起努力啊