前端面试题---vue篇

1、vue优点

轻量级
速度快
简单易学
低耦合
可重用性
独立开发
文档齐全，且文档为中文文档

2、组件传值方式有哪些

父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值
子传父：子组件通过 this.$emit(‘fnName’,value) 来传递,父组件通过接收 fnName 事件方法来接收回调
其他方式：通过创建一个bus，进行传值
使用Vuex

3、vue 事件中如何使用 event 对象?

获取事件对象，方法参数传递 $event 。注意在事件中要使用 $ 符号
<button @click=“Event($event)”>事件对象

4、vue 中子组件调用父组件的方法?

直接在子组件中通过 this.$parent.event来调用父组件的方法。在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了。
父组件把方法传入子组件中，在子组件里直接调用这个方法。

5、子组件为何不可以修改父组件传递的 Prop？

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

6、v-show和v-if指令的共同点和不同点

相同点:都可以控制dom元素的显示和隐藏
不同点:v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面
v-if直接将dom元素从页面删除，再次切换需要重新渲染页面
使用场景
v-if 适合运营条件不大可能改变
v-show 适合频繁切换

7、v-for 与 v-if 的优先级?

v-for 和 v-if 同时使用，有一个先后运行的优先级，v-for 比 v-if 优先级更高，这就说明在
v-for 每次的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中同时使用。

8、如何让CSS只在当前组件中起作用

scoped

9、<keep-alive></keep-alive>的作用是什么

主要是用于需要频繁切换的组件时进行缓存，不需要重新渲染页面

10、如何获取dom

给dom元素加ref=‘refname’,然后通过this.$refs.refname进行获取dom元素

11、 vue 常用的修饰符?

事件修饰符
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

v-model 的修饰符
.lazy 通过这个修饰符，转变为在 change 事件再同步
.number 自动将用户输入值转化为数值类型
.trim 自动过滤用户输入的收尾空格

键盘事件修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

系统修饰符
.ctrl
.alt
.shift
.meta

鼠标按钮修饰符
.left
.right
.middle

12、说出几种vue当中的指令和它的用法

v-model 多用于表单元素实现双向数据绑定
v-bind：简写为：，动态绑定一些元素的属性，类型可以是：字符串、对象或数组。
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json
v-show 显示内容
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-if指令：取值为true/false，控制元素是否需要被渲染
v-else-if 必须和v-if连用
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

13、vue-loader是什么？它的用途是什么？

vue文件的一个加载器，将template/js/style转换为js模块
用途:js可以写es6、style样式

14、为什么用key

给每个dom元素加上key作为唯一标识 ，diff算法可以正确的识别这个节点，使页面渲染更加迅速。

15、Vue 项目中为什么要在列表组件中写 key，其作用是什么？

key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。
更准确
因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。
更快
利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

16、axios是什么及安装？

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。
vue项目中使用ajax时需要axios插件
下载方式npm install axios --save

17，slot插槽

slot插槽，可以理解为slot在组件模板中提前占据了位置，当复用组件时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中对应slot标签的位置，作为承载分发内容的出口
主要作用是：复用和扩展组件，做一些定制化组件的处理

18、请说出vue.cli项目中src目录每个文件夹和文件的用法

components存放组件
app.vue主页面入口
index.js主文件入口
assets存放静态资源文件
router是定义路由相关的配置

19、vue全家桶

vue-cli、vuex、vueRouter、Axios

20、vue-cli 工程常用的 npm 命令有哪些?

npm install 下载 node_modules 资源包的命令
npm run dev 启动 vue-cli 开发环境的 npm 命令
npm run build vue-cli 生成 生产环境部署资源 的 npm 命令
npm run build–report 用于查看 vue-cli 生产环境部署资源文件大小的 npm 命令

21、请说出 vue-cli 工程中每个文件夹和文件的用处?

build 文件夹是保存一些 webpack 的初始化配置。
config 文件夹保存一些项目初始化的配置
node_modules 是 npm 加载的项目依赖的模块
src 目录是我们要开发的目录:
assets 用来放置图片
components 用来放组件文件
app.vue 是项目入口文件
main.js 项目的核心文件
package.json基础配置，告诉我们项目的信息（版本号、项目姓名、依赖）
babelrc：ES6解析的配置。

22、分别简述computed和watch的使用场景

所有需要用到计算的都应该使用计算属性。多条数据影响一条数据时使用计算属性，使用场景购物车。
如果是一条数据更改，影响多条数据时，使用watch，使用场景搜索框。

23、v-on可以监听多个方法吗？

可以，比如 v-on=“onclick,onblur”

24、谈一谈你对 nextTick 的理解

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

25、vue组件中data为什么必须是一个函数？

因为javaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，他们值负责各自维护数据，不会造成混乱。而单纯的写成对象形式，就是所有组件实例共用了一个data，这样改一个全部都会修改。

26、渐进式框架的理解

主张最少
可以根据不同的需求选择不同的层级

27，async await 是什么？它有哪些作用？

async await 是ES7的新增，async用于声明一个函数，await用于等待一个异步方法执行完成。async函数返回的是一个promise对象,可以用.then方法添加回调函数，在函数执行的中，一旦遇到await就回先返回,等到这个异步操作完成之后，它再进行函数体内后面的这个语句

28、vue在双向数据绑定是如何实现的？

v-model用于表单的双向绑定，可以实时修改数据。
vue双向数据绑定是通过数据劫持、组合、发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变
核心：关于vue双向数据绑定，其核心是Object.defineProperty()定义属性方法。

29，vue双向数据绑定的原理？

mvvm场景：数据操作比较多的场景，需要大量使用DOM元素时，采用mvvm的开放方式，会更加便捷，让开发者更多的经历放在数据的变化上，解放繁琐的DOM元素
MVVM 模型，
M 数据 从后台获取的商品数据
V 视图 就是写好的页面，每一个div，每一个input 都是视图
VM 视图模型，
数据发生变化，通过视图模型会改变视图的显示，视图上的改变，也会通过视图模型进而影响数据的变化
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

30、单页面应用和多页面应用区别及缺点

单页面应用（SPA），通俗的说就是指只有一个主页面的应用，浏览器一开始就加载所有的js、html、css。所有的页面内容都包含在这个主页面中。但在写的时候，还是分开写，然后再加载的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多用于pc端。
多页面（MPA），就是一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离，页面效果会比较酷炫
单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。初次加载时耗时多；页面复杂度提高很多。

31、vue和jQuery的区别

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

32、delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

33、vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

34、vue更新数组时触发视图更新的方法

会改变原数组：

• pop (删除数组的最后一个元素并返回删除的元素)
• push(向数组的末尾添加一个或更多元素，并返回新的长度)
• shift(删除并返回数组的第一个元素）
• unshift(向数组的开头添加一个或更多元素，并返回新的长度)
• reverse(反转数组的元素顺序)
• sort(对数组的元素进行排序)
• splice(用于插入、删除或替换数组的元素)
  不会改变原数组：
• concat—连接两个或更多的数组，并返回结果。
• every—检测数组元素的每个元素是否都符合条件。
• some—检测数组元素中是否有元素符合指定条件。
• filter—检测数组元素，并返回符合条件所有元素的数组。
• indexOf—搜索数组中的元素，并返回它所在的位置。
• join—把数组的所有元素放入一个字符串。
• toString—把数组转换为字符串，并返回结果。
• lastIndexOf—返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
• map—通过指定函数处理数组的每个元素，并返回处理后的数组。
• slice—选取数组的的一部分，并返回一个新数组。
• valueOf—返回数组对象的原始值

35、父组件和子组件生命周期钩子执行顺序是什么？

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

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

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

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

36、vue生命周期的理解

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

37、什么是 vue 生命周期？有什么作用？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。

38、第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

39、vue获取数据在一般在哪个周期函数

created
beforeMount
mounted

40、created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

41、vuex是什么vuex有哪几种属性？

状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。
有五种，State、 Getter、Mutation 、Action、 Module
state： 基本数据(数据源存放地)
getters： 从基本数据派生出来的数据，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
mutations ： 提交更改数据的方法，必须是同步！每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，调用函数需要 store.commit 方法：
actions ： 像一个装饰器，包裹mutations，使之可以异步。Action 提交的是 mutation，而不是直接变更状态
modules ： Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

42，vue 中使用了哪些设计模式？

1、工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。
2、单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。
3、发布-订阅模式。（vue 事件机制）
4、观察者模式。（响应式数据原理）
5、装饰器模式（@装饰器的用法）
6、策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。

43、$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

44，什么是防抖和节流，js 如何处理防抖和节流

防抖 (Debouncing) 的含义是指在一定时间内，多次触发同一个事件，只执行最后一次操作
节流 (Throttling) 的含义是指在一定时间内，多次触发同一个事件，只执行第一次操作。将一定时间内的多次触发限制为一次操作
通过设置节流阀(定时器)

45、虚拟DOM是什么？有什么优缺点？

由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。

优点：
1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，他的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好 View-Model的 代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
缺点：
1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。

46、SPA首屏加载慢如何解决

安装动态懒加载所需插件；使用CDN资源。

47、你都做过哪些 Vue 的性能优化？

这里只列举针对 Vue 的性能优化，整个项目的性能优化是一个大工程。
对象层级不要过深，否则性能就会差。
不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
防止内部泄露，组件销毁后把全局变量和时间销毁
图片懒加载
路由懒加载
异步路由
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用
服务端渲染 SSR or 预渲染
A.生成打包报告，根据报告优化项目

B.第三方库启用CDN

C.Element-UI组件按需加载

D.路由懒加载
babel/plugin-syntax-dynamic-import
E.首页内容定制

48，vue2和vue3比较

一、 vue2 使用 new Vue({ …选项 }) 构造函数的方式创建；
vue3 通过内置的 createApp( //根组件 ) 方法创建。
二、Vue3 新增的片断特性，允许单文件组件中的 template 元素下可以有多个节点
三、vue3的响应式原理实现不一样
vue2的双向数据绑定是使用 Object.definepropert() 对数据进行劫持，结合发布订阅模式实现。

vue3中使用了es6的proxyAPI对数据进行处理。
使用proxy 可以劫持整个data对象，然后递归返回属性的值的代理即可实现响应式。

四、新增三个组件（Fragment、Teleport、Suspense）
Teleport：其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。内置组件可以将内容挂载到指定的目标元素。
Fragment：由于组件必须是一个根结点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的
Suspense 让你的组件在渲染之前进行“等待”，并在等待时显示 fallback 的内容
五、Composition-API：组合 Api（vue 希望通过功能函数的组合去实现逻辑拆分与复用）
diff 算法优化

• Vue2 中的虚拟dom 是进行全量对比
• Vue3 新增静态标记patchFlags

hoistStatic 静态提升

• Vue2 中无论元素是否参与更新，每次都会重新创建，然后在渲染
• Vue3 中对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可

cacheHandlers 事件侦听器缓存

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

ssr 渲染

• 当有大量静态的内容的时候，这些内容会被当作纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模版插值嵌入进去，这样会比通过虚拟dom来渲染的快上很多很多
• 当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static
  node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

五、新增和修改了生命周期钩子函数

• beforeDestroy改成beforUnmount
• destroyed改成 unmounted
• 新增了 renderTracked、serverPrefetch 等钩子函数；

beforeCreate  -> setup()	开始创建组件之前，创建的是data和method
created       -> setup()
beforeMount   -> onBeforeMount	组件挂载到节点上之前执行的函数。
mounted       -> onMounted	组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate	组件更新之前执行的函数。
updated       -> onUpdated	组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount	组件挂载到节点上之前执行的函数。
destroyed     -> onUnmounted	组件卸载之前执行的函数。
activated     -> onActivated	组件卸载完成后执行的函数
deactivated   -> onDeactivated  在组件切换中老组件消失的时候执行

六、Composition API组合式 API 在组合式 api 中不同的调用方式。

• 组合式 API 是 vue3 最大的一个变化，也是很多熟悉 vue2 的开发者最需要适应的方法。
• 可以在单文件组件中使用组合式 API 的编译时语法糖 <script setup>，有使代码更简洁、更好的运行时性能、能够使用纯
  TypeScript 声明 props 和自定义事件等优势；
• 不能在 setup 中使用 this 返回 vue 实例对象
• 生命周期钩子函数名称前加了 on
• 传参 props 和 事件 emit 有不同的调用方式
• 计算属性 computed 和 监听器 watch 使用方式不同
• 新增大量的响应式 api，合理地运用这些 api 操作数据，并可使页面响应数据变化。

七、支持 typescript 开发语法

• 多了一种开发方式，有利于团队合作、使代码更规范和严谨；对于习惯 javascript 松散语法的开发者来说，可能不太喜欢这种开发方式