前端面试题（vue篇）

喜欢ヅ旅行 2022-11-05 07:30 191阅读 0赞

# 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