«

2022年vue面试题总结二

时间:2022-3-25     作者:一行虎     分类: 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 代码

标签: vue 面试题目