面试题-Vue框架

蔚落 2023-01-15 02:12 116阅读 0赞

### 文章目录 ###

*   *   *  1、说说你对Vue的理解
         *  2、说说Vue的优缺点
         *  3、Vue 和 React 有什么不同、使用场景分别是什么
         *  4、什么是虚拟 DOM
         *  5、请描述下 Vue 的生命周期是什么
         *  6、Vue 如何监听键盘事件
         *  7、watch 怎么深度监听对象变化
         *  8、删除数组用 delete 和 Vue.delete 有什么区别
         *  9、watch 和计算属性有什么区别
         *  10、Vue 双向绑定原理
         *  11、v-model 是什么、有什么用呢
         *  12、axios 是什么、怎样使用它、怎么解决跨域的问题
         *  13、在 Vue 项目中如何引入第三方库（比如 jQuery）、有哪些方法可以做到
         *  14、说说 Vue React angularjs jquery 的区别
         *  15、Vue3.0 里为什么要用 Proxy API 替代 defineProperty API
         *  16、Vue3.0 编译做了哪些优化
         *  17、Vue3.0 是如何变得更快的？（底层，源码）
         *  18、Vue 要做权限管理该怎么做、如果控制到按钮级别的权限怎么做
         *  19、Vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别
         *  20、说说你对 proxy 的理解

### 1、说说你对Vue的理解 ###

Vue 是一个构建数据驱动的渐进性框架，它的目标是通过 API 实现响应数据绑定和视图更新。

### 2、说说Vue的优缺点 ###

优点：

1、数据驱动视图，对真实 dom 进行抽象出 virtual dom（本质就是一个 js 对象）， 并配合 diff 算法、响应式和观察者、异步队列等手段以最小代价更新 dom，渲染页面。

2、组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文件里编写 html\\css（scoped 属性配置 css 隔离）\\js 并且配合 Vue-loader 之后，支持更强大的预处理器等功能。

3、强大且丰富的 API 提供一系列的 api 能满足业务开发中各类需求。

4、由于采用虚拟 dom，让 Vue ssr 先天就足。

5、生命周期钩子函数，选项式的代码组织方式，写熟了还是蛮顺畅的，但仍然有优化空间（Vue3 composition-api）。

6、生态好，社区活跃。

缺点：

1、由于底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8 及以下浏览器。

2、csr 的先天不足，首屏性能问题（白屏）。

3、由于百度等搜索引擎爬虫无法爬取 js 中的内容，故 spa 先天就对 seo 优化心有余力不足（谷歌的 puppeteer 就挺牛逼的，实现预渲染底层也是用到了这个工具）。

### 3、Vue 和 React 有什么不同、使用场景分别是什么 ###

1、Vue 是完整一套由官方维护的框架，核心库主要有由尤雨溪大神独自维护，而React 是不要脸的书维护（很多库由社区维护），曾经一段时间很多人质疑 Vue 的后续维护性， 似乎这并不是问题。

2、Vue 上手简单，进阶式框架，白话说你可以学一点，就可以在你项目中去用一点， 你不一定需要一次性学习整个 Vue 才能去使用它，而React，恐怕如果你这样会面对项目束手无策。

3、语法上 Vue 并不限制你必须 es6+完全js 形式编写页面，可以视图和 js 逻辑尽可能分离，减少很多人看不惯 React-jsx 的恶心嵌套，毕竟都是作为前端开发者，还是更习惯于html 干净。

4、很多人说 React 适合大型项目，适合什么什么，Vue 轻量级，适合移动端中小型项目， 其实我想说，说这话的人是心里根本没点逼数，Vue 完全可以应对复杂的大型应用，甚至于说如果你React 学的不是很好，写出来的东西或根本不如 Vue 写的，毕竟 Vue 跟着官方文档撸就行，自有人帮你规范，而React 比较懒散自由，可以自由发挥。

5、Vue 在国内人气明显胜过 React，这很大程度上得益于它的很多语法包括编程思维更符合国人思想。

### 4、什么是虚拟 DOM ###

1、虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue 等技术出现之前， 我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

2、这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

### 5、请描述下 Vue 的生命周期是什么 ###

1、生命周期就是vue 从开始创建到销毁的过程，分为四大步（创建，挂载， 更新，销毁），每一步又分为两小步，如 beforeCreate，created。beforeCreate 前，也就是new Vue 的时候会初始化事件和生命周期；

2、beforeCreate 和created 之间会挂载Data，绑定事件；

3、接下来会根据el 挂载页面元素，如果没有设置el 则生命周期结束，直到手动挂载；

4、el 挂载结束后，根据templete/outerHTML(el)渲染页面；

5、在 beforeMount 前虚拟 DOM 已经创建完成；

6、之后在 mounted 前，将 vm.$el 替换掉页面元素el;mounted 将虚拟dom 挂载到真实页面（此时页面已经全部渲染完成）；

7、之后发生数据变化时触发beforeUpdate 和updated 进行一些操作；

8、最后主动调用销毁函数或者组件自动销毁时 beforeDestroy，手动撤销监听事件，计时器等；

9、destroyed 时仅存在Dom 节点，其他所有东西已自动销毁。这就是我所理解的vue 的一个完整的生命周期。

![image-20210420232026938][]

### 6、Vue 如何监听键盘事件 ###

**1、@keyup 方法**

<template>
    	<input ref="myInput" type="text" value="hello world" autofocus @keyup.enter="handleKey">
    </template>
    
    <script>
    export default { 
    	methods: {
    		handleKey(e) { 
    			console.log(e)
    		}
    	}
    }
    </script>

**2、addEventListener**

### 7、watch 怎么深度监听对象变化 ###

// deep 设置为true 就可以监听到对象的变化
    let vm=new Vue({
    	el:"#first", 
    	data:{
    		msg:{
    			name:'北京'
    		}
    	}, 
    	watch:{
        msg:{
          handler(newMsg, oldMsg){ 
          	console.log(newMsg);
        	},
    			immediate:true, 
    			deep:true
    		}
    	}
    })

### 8、删除数组用 delete 和 Vue.delete 有什么区别 ###

1、delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变

2、 Vue.delete：直接删了数组成员，并改变了数组的键值（对象是响应式的，确保删除能触发更新视图，这个方法主要用于避开 Vue 不能检测到属性被删除的限制）

### 9、watch 和计算属性有什么区别 ###

1、通俗来讲，既能用 computed 实现又可以用 watch 监听来实现的功能，推荐用 computed， 重点在于computed的缓存功能

2、computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；

3、watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法。

### 10、Vue 双向绑定原理 ###

Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

利用了Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

### 11、v-model 是什么、有什么用呢 ###

一则语法糖，相当于 v-bind:value=“xxx” 和 @input，意思是绑定了一个 value 属性的值， 子组件可对value 属性监听，通过$emit(‘input’, xxx)的方式给父组件通讯。自己实现v-model 方式的组件也是这样的思路。

### 12、axios 是什么、怎样使用它、怎么解决跨域的问题 ###

axios 的是一种异步请求，用法和ajax 类似，安装npm install axios --save 即可使用，请求中包括get,post,put, patch ,delete 等五种请求方式，解决跨域可以在请求头中添加Access-Control-Allow-Origin，也可以在 index.js 文件中更改proxyTable 配置等解决跨域问题。

### 13、在 Vue 项目中如何引入第三方库（比如 jQuery）、有哪些方法可以做到 ###

1、绝对路径直接引入

在index.html 中用script 引入

然后在webpack 中配置external externals: \{ ‘jquery’: ‘jQuery’ \} 在组件中使用时 import

import $ from ‘jquery’

2 、在webpack 中配置alias

resolve: \{ extensions: \[’.js’, ‘.vue’, ‘.json’\], alias: \{ ‘@’: resolve(‘src’), ‘jquery’: resolve(‘static/jquery-1.12.4.js’) \} \}

然后在组件中import

3、在webpack 中配置plugins

plugins: \[ new webpack.ProvidePlugin(\{ $: ‘jquery’ \}) \]

全局使用，但在使用eslint 情况下会报错，需要在使用了 $ 的代码前添加 /\* eslint-disable\*/ 来去掉 ESLint 的检查。

### 14、说说 Vue React angularjs jquery 的区别 ###

1、JQuery 与另外几者最大的区别是，JQuery 是事件驱动，其他两者是数据驱动。

2、JQuery 业务逻辑和UI 更改该混在一起， UI 里面还参杂这交互逻辑，让本来混乱的逻辑更加混乱。

3、Angular，Vue 是双向绑定，而React 不是其他还有设计理念上的区别等

### 15、Vue3.0 里为什么要用 Proxy API 替代 defineProperty API ###

响应式优化。

1、defineProperty API 的局限性最大原因是它只能针对单例属性做监听。

Vue2.x 中的响应式实现正是基于 defineProperty 中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。

这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因，在 Vue 中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到 setter 监听的，这是defineProperty 的局限性。

2、Proxy API 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

3、响应式是惰性的

在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。

在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

4、基础用法：

let datas = {
    	num:0
    }
    let proxy = new Proxy(datas,{
    	get(taget,property){
    		return target[property]
    	},
    	set(target,property,value){
    		target[property] += value
    	}
    })

### 16、Vue3.0 编译做了哪些优化 ###

1、生成Block tree

Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的，单个组件内部 需要遍历该组件的整个 vnode 树。在2.0里，渲染效率的快慢与组件大小成正相关：组件越大，渲染效率越慢。并且，对于一些静态节点，又无数据更新，这些遍历都是性能浪费。Vue.js 3.0 做到了通过编译阶段对静态模板的分析，编译生成了 Block tree。

Block tree是一个将模版基于动态节点指令切割的嵌套区块，每个 区块内部的节点结构是固定的， 每个区块只需要追踪自身包含的动态节点。所以，在3.0里，渲染效率不再与模板大小成正相关，而是与模板中动态节点的数量成正相关。

<template>
    	<div id="content">
    		<p class="text">happy</p>
    		<p class="text">happy</p>
    		<p class="text">{
       {message}}</p>
    		<p class="text">happy</p>
    	</div>
    </template>
    
    + Diff <p> textContent
    + 节点结构完全不会改变
    + 只有一个动态节点

2、slot 编译优化

Vue.js 2.x 中，如果有一个组件传入了 slot，那么每次父组件更新的时候，会强制使子组件update，造成性能的浪费。

Vue.js 3.0 优化了 slot 的生成，使得非动态 slot 中属性的更新只会触发子组件的更新。动态slot指的是在slot上面使用v-if，v-for，动态slot名字等会导致slot 产生运行时动态变化但是又无法被子组件track的操作。

3、diff算法优化

### 17、Vue3.0 是如何变得更快的？（底层，源码） ###

1、diff方法优化

Vue2.x 中的虚拟dom 是进行全量的对比。

Vue3.0 中新增了静态标记（PatchFlag）：在与上次虚拟结点进行对比的时候，值对比带有patch flag 的节点，并且可以通过 flag 的信息得知当前节点要对比的具体内容化。

2、hoistStatic静态提升

Vue2.x : 无论元素是否参与更新，每次都会重新创建。

Vue3.0 : 对不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用。

3、cacheHandlers事件侦听器缓存

默认情况下onClick 会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。

### 18、Vue 要做权限管理该怎么做、如果控制到按钮级别的权限怎么做 ###

[权限验证][Link 1]

### 19、Vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别 ###

1、看实际情况，一般在created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用mounted。

2、在created 的时候，视图中的 html 并没有渲染出来，所以此时如果直接去操作 html 的dom 节点，一定找不到相关的元素。

3、而在mounted 中，由于此时html 已经渲染出来了，所以可以直接操作 dom 节点，（此时document.getelementById 即可生效了）。

### 20、说说你对 proxy 的理解 ###

vue 的数据劫持有两个缺点:

1、无法监听通过索引修改数组的值的变化

2、无法监听object 也就是对象的值的变化所以vue2.x 中才会有$set 属性的存在

proxy 是es6 中推出的新api，可以弥补以上两个缺点，所以 vue3.x 版本用proxy 替换object.defineproperty。

[image-20210420232026938]: /images/20221022/8e9b3b5a44d640c3b5bc3afc1fff6ecf.png
[Link 1]: https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E9%80%BB%E8%BE%91%E4%BF%AE%E6%94%B9