前端面试题（vue篇）

1.vue性能优化的几种方案

1.正确的选择v-if和v-show的使用，v-if有更高的切换消耗，v-show有更高的初始消耗

2.路由懒加载：当页面很多，组件很多的时候，SPA页面在首次加载的时候，就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面进行优化，就需要异步组件了。

3.缓存：spa页面采用keep-alive缓存组件
4.图片懒加载：提高页面加载速度，不在可视区域内的图片先不加载，只有滚动到可视区域的时候才加载。一般借助外部插件如 vue-lazyload。使用只需要npm install vue-lazyload然后页面引入即可使用。
5.SEO优化： ssr服务端渲染
6.打包优化：对于一些过大的包采取cdn引入文件的方式而不是直接下载到本地。

2.v-show和v-if谁的性能更高

v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。所以如果要频繁切换那么v-show性能更高，如果不是频繁切换，v-if性能更高

3.vue之间的数据传递

父到子：props
子到父：$emit自定义事件
复杂组件的传递：通过vuex

4.单文件组件中如何让样式只在当前组件生效

在组件中的style前面加上scoped

5.vue中的生命周期（钩子函数）

共有8+2个钩子函数 基本的有8个，keep-alive中有2个

beforeCreate（创建前） / created（创建后） / beforeMount（挂载前） / mounted（挂载后） beforeUpdate（更新前）/ updated（更新后） /beforeDestroy（销毁前）/ destroyed（销毁后）

其中第一次加载页面会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

另外在keep-alive中，vue新增了两个钩子函数
activated：因为使用了keep-alive的组件会被缓存，所以created,mounted这种的钩子函数只会执行一次， 如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
deactivated：组件被移除时使用。

6.vue父子组件生命周期的执行顺序

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

7.在vue中如何获取DOM元素

给元素添加ref属性 通过this.$refs.domName获取

8.key的作用

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

9.$nextTick的使用场景（作用）

因为vue中数据更新是异步的，当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

10.v-if和v-for的优先级

v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。如果非要一起用，可以把v-if放到外层元素，或者不用v-if，先在计算属性中筛选出数据，然后在v-for

11.v-model的原理

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

12.什么是mvvm

MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。
Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model 变化也会立即反映到 View 上显示。
当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。

13.如何优化SPA应用的首屏加载速度慢的问题

将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；
在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
加一个首屏 loading 图，提升用户体验；

14.vue路由的两种模式，hash与history的区别

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的 功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供 的接口）来实现前端路由。

注意！！！history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。刷新也会报404因为会实际去请求数据。 （需要后端进行配置。vue官网有介绍）

15.如何解决vuex数据刷新丢失的问题

因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值

如何解决：

一种是state里的数据全部是通过请求来触发action或mutation来改变(不推荐，当vuex数据很多项目很大的时候不适用)

一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中 （推荐）

16.vue中如何实现跨域访问

1.开发环境：配置vue.config.js proxy代理
2.生产环境：配置nginx代理

17.vue中的watch都可以监听哪些值

1.data中的数据
2.props
3.$route
4.$emit
5.computed