vue面试题（一）

最新推荐文章于 2022-06-30 20:08:57 发布

喜欢你是我的秘密_晗

最新推荐文章于 2022-06-30 20:08:57 发布

阅读量98

点赞数 2

文章标签： vue.js 面试 javascript

本文链接：https://blog.csdn.net/m0_52091310/article/details/120436818

版权

1：说说你对 SPA 单页面的理解？

SPA：全称（single-page application)

概念：仅在Web页面初始化时加载相对应的代码。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转。利用的是路由机制实现代码的变换，避免页面的重新加载

优点：
• 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 基于上面一点，SPA 相对对服务器压力小；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
• 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 CSS JavaScript、统一加载，部分页面按需加载；
• 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
• SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

2：请问 v-if 和 v-show 有什么区别？

1.共同点

都是动态显示和隐藏DOM元素

2.区别：

（1）手段：

v-if是动态的向DOM树内添加或者删除DOM元素；

v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

（3）编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗；

（5）使用场景：

v-if适合运营条件不大可能改变；

v-show适合频繁切换。

3：vue中 key 值的作用？

key的作用是为了更高效的对比虚拟DOM中每个节点是否是相同节点

使用key来给每个节点做一个唯一标识

key的主要作用是为了高效的更新虚拟DOM，另外vue中在使用相同标签名元素过渡切换时，也会使用到key属性，目的也是为了vue可以区分他们，否则vue只会替换其内部属性，而不会触发过渡效果

4：computed 和 watch 的区别和运用的场景？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

5：说⼀下vue常⽤基本指令有哪些？

v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 v-show：根据表达式之真假值，切换元素的 display CSS 属性。

v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值使用。

v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。

v-model：实现表单输入和应用状态之间的双向绑定

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

6：说⼀下vue组件通讯（即传值）有哪⼏种形式，分别是如何实现的

vue组件通讯大致有三种：父传子，子传父，还有兄弟之间通讯

第一种：父传子：主要通过props来实现的具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收，接收有两种形式：

一是通过数组形式[‘要接收的属性’ ]，

二是通过对象形式{ } 来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

第二种：子传父：主要通过$emit来实现具体实现：子组件通过通过绑定事件触发函数，在其中设置this.$emit(‘要派发的自定义事件’，要传递的值)，$emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参数

第三种：兄弟之间传值有两种方法：

方法一：通过event bus实现具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件A中通过bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.$on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接收数据

方法二：通过vuex实现具体实现：vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules

5 个要素，主要流程：组件通过 dispatch 到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态

7.：说⼀下vue开发环境和线上环境如何切换？

主要通过检测 process.env.NODE_ENV===”production” 和 process.env.NODE_ENV===”development”环境，来设置线上和线下环境地址，从而实现线上和线下环境地址的切换

8.：说⼀下你对单向数据流的理解？

单向数据流主要是vue 组件间传递数据是单向的，即数据总是由父组件传递给子组件，子组件在其内部维护自己的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做是为了组件间更好的维护。在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据

9.：说⼀下vue双向数据绑定的原理？

核心主要利用ES5中的Object.defineProperty实现的，然后利用里面的getter和setter来实现双向数据绑定的，大致就这些，其实要实现起来比这个要复杂一些，不过我大致了解过。

10：组件中 data 为什么是一个函数？

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

11：vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract，

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

12：Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下: