2022年vue面试题总结二

vuex 和 localStorage 的区别

1、vuex的数据刷新页面会丢失，而localStorage的数据是永久存储的，除非手动清除。
2、vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；
sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，
对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
3、应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。
4、vuex的数据是响应式的
5、localstorage无法存储function.

vue 中的动态路由

像后台管理系统的左边菜单的导航栏，要做角色权限的一个控制；路由由后端返回
简单的角色权限：管理员权限和普通用户
复杂的路由权限：OA系统，门店用户，个人用户，区域用户

vue 的插槽 v-slot

父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
在vue2.6版本以上使用v-slot代替了slot 和 scope-slot ，vue3.0中也弃用了。
v-slot 只能添加到template 或自定义组件上
可以在子组件上写插槽的默认内容：<slot name='header'>11111111111</slot>
1、默认的插槽
    ==>任何没有被包裹在带有 v-slot 的 组件标签 中的内容都会被视为默认插槽的内容。
            没有名字的 隐含有一个 “default” 名称
2、具名插槽
    ==><template v-slot:header> <p>111111111</p> </template>
    ==><template #header> <p>111111111</p> </template>
3、作用域插槽
    ==><slot name="header" :data='user'>0000000000</slot>
    ==><template v-slot:header='slotprops'> <p>{{slotprops.data}}</p></template>
4、动态插槽名
    ==><template v-slot:[dynamicSlotName]> 00000000 </template>
1、父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
2、<slot></slot>标签里面的内容会作为后备内容且有默认的名字default
3、(特殊：独占默认插槽的缩写语法)---只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法，v-slot 只能添加在 <template> 上
4、作用域插槽:绑定在 <slot> 元素上的 attribute 被称为插槽 prop
5、#简写： #default="{ user }"

vue 中的混入 minx

1、混入对象的钩子将在组件自身钩子之前调用。
mixins:局部混入
mixin:全局混入，一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例

vue 中的过滤器

双花括号插值
1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
请谈谈你对 mvvm 的理解
vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
MVVM 由 Model、View、ViewModel 三部分构成
Model： 代表数据模型，也可以在 Model 中定义数据修改和业务逻辑；
View ：代表 UI 组件，它负责将数据模型转化成 UI 展现出来；
ViewModel ：是一个同步View 和 Model的对象；
响应式开发
组件化开发
Vue的核心思想就是数据驱动页面，所谓数据驱动，就是页面的dom结构由数据的映射产生，开发者不用去管界面的渲染，只需要管理数据的修改

//暴露的问题
1、开发者在代码中大量调用相同的 DOM API, 处理繁琐 ，操作冗余，使得代码难以维护。
2、大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
3、当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

Vue.js 可以说是MVVM 架构的最佳实践，VUE并没有完全遵循MVVM，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁，很容易上手

MVC

MVC 是 Model-View-Controller 的缩写，即 模型—视图—控制器 。
Model：后端传递的 数据 。
View：所看到的 页面 。
Controller：页面 业务逻辑 。

v-model 双向数据绑定的原理

ue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现。
数据劫持的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件。
其中observer是最主要的部分，
用Object.defineProperty来实现数据的劫持，
然后用他的set,get方法来通知订阅者，触发update方法，从而实现更新视图
Object.defineProperty()
    ==>给对象添加一个属性并指定该属性的配置。
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。
vue 中的修饰符
//事件修饰符
    .stop 阻止单机事件冒泡
    .prevent 阻止默认行为（比如 @submit.prevent 会阻止提交后刷新页面）
    .capture 添加事件侦听器时使用捕获模式
    .self 只有事件在元素本身（而不是子元素）触发时触发回调
    .once 只触发一次（组件也适用）
    .key 触发事件的按键
    .native 原生点击事件
//v-model 修饰符
    .lazy在输入框中，默认是在input事件中同步输入框的数据，使用 lazy修饰符会转变为在change事件中同步（失去焦点或按回车才更新）。
    . number将输入转换为Number类型，默认是String
    .trim 自动过滤输入的首尾空格

vue 中的自定义指令

directives: 自定义指令
有三个钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
el, binding, vnode,oldVnode：四个函数的入参
//el：指令所绑定的元素，可以用来直接操作 DOM。
//binding：一个对象，包含以下 property：
//vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
//oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

vue 框架的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

vue-loader 是什么

vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

axios 的特点有哪些

从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。

封装 vue 组件的过程

1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)
2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
4. 封装完毕了，直接调用即可
面对对象思想
面向对象的方法就是利用抽象、封装等机制，借助于对象、类、继承、消息传递等概念进行软件系统构造的软件开发方法。
面向对象，将所需要做的功能抽象成一个“对象”，然后反复调用这个对象来完成你想要的功能

vue 初始化页面闪动问题

在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

vue-router 实现路由懒加载

结合 Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window)，轻松实现路由组件的懒加载
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

SPA 单页面的理解

优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

基于上面一点，SPA 相对对服务器压力小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

Vue 的单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
Vue 的父组件和子组件生命周期钩子函数执行顺序
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

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

子组件更新过程

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

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
！！！子组件的updated 、mounted 和destroyed 优先于父组件执行

SSR 服务器渲染

 BSR 客户端渲染(前后端分离)：视图与数据的组装是在客户端完成的
SSR 服务器渲染(前后端不分离)：视图和数据的组装是在服务端完成的
BSR的优势和劣势有哪些？
    服务器压力小
  前后端分离,代码更容易维护
  数据化应用，交互更加丰富
  前端工程师来讲价值更高
  在ToC产品上应用更广泛
SSR的优势和劣势有哪些？
  前后端不分离,对后端的要求非常高
  有利于SEO
  对客户端的压力比较小，服务器压力较大
  在ToB产品上应用比较广泛

vue 项目的前端代码优化

路由懒加载
图片懒加载：data-src
cdn静态资源加速
第三方插件的按需引入
开启gzip压缩

防抖和节流
减少回流和重绘呀
v-if和v-show的使用
离开路由时销毁定时器和监听事件
keep-alive

vue3 有了解吗

（1）监测机制的改变：Proxy 替换了Object.defineProperty 去监听数据的变化
（2）模板： 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
（3）对象式的组件声明方式：3.0 修改了组件的声明方式，改成了类式的写法
Vue 3.0 正走在发布的路上，Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大，因此 Vue 3.0 增加以下这些新特性：
Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；（$set）

Proxy 可以直接监听数组的变化；

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；

Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器
入口(entry):
输出(output):
loader:
插件(plugins):目的在于解决 loader 无法实现的其他事

Webpack打包顺序流程
1.初始化参数：读取命令行传入或者webpack.config.js文件，初始化本次构建的配置参数
2.开始编译 用上一步得到的参数初始Compiler对象，加载所有配置的插件，通过执行对象的run方法开始执行编译
3.确定入口 根据配置中的 Entry 找出所有入口文件
4.编译模块 从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5.完成模块编译 在经过第4步使用 Loader 翻译完所有模块后， 得到了每个模块被编译后的最终内容及它们之间的依赖关系
6.输出资源 根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会
7.输出完成 在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。

webpack 的常见 loader

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码