1. vue理解:
核心特性:
-
- 数据驱动(MVVM)
Model:模型层,负责处理业务逻辑以及和服务器端进行交互。
View:视图层,负责将数据模型转化为UI展示出来,可以简单理解为HTML页面。
ViewModel:视图模型层,用来连接Model和view,是Model和View之间的通信桥梁。
- 数据驱动(MVVM)
-
- 组件化
图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发模式,在vue中每一个.vue文件都可以视为一个组件。
优点:高内聚,低耦合;更好的复用;可维护性;扩展性。
- 组件化
-
- 指令系统
指令是指带有v-前缀的特殊属性作用:当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM。
v-if:条件渲染指令。
v-for:列表渲染。
v-bind:属性绑定。
v-on:事件绑定。
v-model:双向数据绑定。
- 指令系统
2. SPA(单页面应用理解)
动态重写当前页面与用户交互,避免了页面之前切换而影响用户体验。他将所有的活动局限在一个web页面中,仅在该web页面初始化时加载相应的HTML,JS,CSS资源。一旦页面加载完成,spa不会因为用户操作而进行页面的重新加载或跳转,而是利用JS动态变化HTML从而实现交互。
- 优点:
- 用户体验好,内容的改变不需要重新加载整个页面。
- 良好的前后端分离。
- 减轻服务器压力,只提供数据,不用负责逻辑与页面的合成。
- 缺点:
-
不利于搜索引擎的抓取,所有内容都在一个页面中动态替换显示。
-
首次渲染速度相对较慢,为实现单页面web应用功能及显示,需要在加载页面的时候将JS、CSS同一加载,部分页面可在需要时加载,所以必须对JS及CSS代码进行合并压缩处理。
| SPA | MPA
组成 | 一个主页面和多个页面片段 | 多个主页面
刷新方式 | 局部刷新 | 整页刷新
url模式 | 哈希模式 | 历史模式
SEO搜索引擎优化 | 难实现,可使用SSR方式改善 | 容易实现
数据传递 | 容易 | 通过url,cookie,localStorage等传递
页面切换 | 速度快、用户体验良好 | 切换加载资源、速度慢、用户体验不好
维护成本 | 相对容易 | 相对复杂
-
3. vue实例挂载的过程
数据绑定 -》 数据渲染 -》 视图
-
- 初始化:执行一系列初始化操作,包括实例化Vue、初始化生命周期、事件系统、响应式数据等。
-
- 模板编译:vue对模板进行编译,将其转化为渲染函数,渲染函数接收数据并返回生成的虚拟DOM。
-
- 挂载:当渲染函数生成虚拟DOM之后,vue会将渲染成真实DOM并将其挂载到指定目标元素上。
-
- 更新:实例被成功挂载后,如果响应式数据发生变化,vue会自动进行重新渲染。
注意:当数据发生变化时,vue会通过依赖追踪机制自动识别出那些组件需要重新渲染,然后再执行渲染函数,生成新的虚拟DOM,并将与旧的虚拟DOM进行比较,找出需要更新的节点,最后将其更新后的节点渲染为真实的DOM。
4. v-for和v-if优先级
- vue2中,v-for优先级高于v-if
- vue3中,v-if优先级高于v-for
解决办法:外层嵌套template(页面渲染不生产dom节点),将优先级低的放入外层嵌套中。
5. SPA首屏加载速度慢的原因和解决办法
速度慢的原因:
- 网络延迟
- 资源文件体积过大
- 资源是否重复发送请求加载
- 加载脚本的时候,渲染内容堵塞
解决办法:
- 减小入口文件体积 (路由懒加载)
- 静态资源本地缓存 (采用HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头;合理使用localStorage;采用service Worker离线缓存)
- UI框架按需加载 (对使用的element-UI框架按需加载)
- 组件重复打包 (在webpack的config文件中,修改CommonsChunkPlugin的配置)
minChunks为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件
- 图片资源的压缩(将众多小图标合并到一张图上,减轻HTTP请求压力)
- 使用SSR
- 开启GZip压缩
6. Vue中给对象添加新属性界面不刷新(直接给对象添加属性)
vue2采用Object.defineProperty()设置响应式数据,对新添加的属性,没有通过Object.defineProperty()给属性添加getter和setter,所以新添加的属性并不是响应式数据。
解决办法:
- 采用**vue.set(target, propertyName/index, value)**添加少量属性值。
- Object.assign()创建新对象,再将合并。
注意:vue3通过proxy实现数据响应式,直接动态添加新属性任然可以实现数据响应式。
7. vue组件之间的通信方式有哪些
-
- 通过props传递:子组件设置props属性,定义接收父组件传递过来的参数。 --父给子传递
-
- e m i t 触发自定义事件:通过 emit触发自定义事件:通过 emit触发自定义事件:通过emit触发自定义事件。 --子给父传递
-
- ref:给子组件设置ref,父组件通过设置子组件ref获取数据。
-
- EventBus:Vue.prototypr.$bus = new Vue() 。 --兄弟组件之间传递
-
- a t t r s 和 attrs和 attrs和listeners:–祖先传递数据给子孙。
-
- provide与inject:祖先组件定义provide属性,返回传递的值;在后代组件通过inject接收组件传递过来的值。 --祖先传递数据给子孙
-
- vuex:存储共享变量的容器。 --复杂关系的组件数据传递。
8. 对nextTick理解
当数据改变的时候,vue并不会立即去更新DOM,而是将修改数据的操作放在一个异步操作的队列中,如果一直修改相同的数据,异步操作队列还会进行去重,所以等待同一事件中的所有数据变化完成之后,会将队列中的事件拿来进行处理,进行DOM的更新。
使用场景:
想要修改数据后立即得到更新后的DOM结构,可以使用Vue.nextTick()。
9. slot(插槽)理解
插槽就是子组件中提供给父组件使用的一个占位符,用表示,父组件可以在这个占位符中填充任何模板代码,如HTML、组件等
- 默认插槽
// 子组件
<template>
<slot>
<p>插槽后备的内容</p>
</slot>
</template>
// 父组件
<Child>
<div>默认插槽</div>
</Child>
- 具名插槽
// 子组件
<template>
<slot>插槽后备的内容</slot>
<slot name="content">插槽后备的内容</slot>
</template>
// 父组件
<child>
<template v-slot:default>具名插槽</template>
<!-- 具名插槽⽤插槽名做参数 -->
<template v-slot:content>内容...</template>
</child>
- 作用域插槽
子组件在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件v-slot接收的对象上。 v-slot:(简写为#)
// 子组件
<template>
<slot name="footer" testProps="子组件的值">
<h3>没传footer插槽</h3>
</slot>
</template>
// 父组件
<child>
<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
<template v-slot:default="slotProps">
来⾃⼦组件数据:{{slotProps.testProps}}
</template>
<template #default="slotProps">来⾃⼦组件数据:{{slotProps.testProps}}</template>
</child>
10. 对keep-alive理解
vue内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
可以设置以下属性:
- include:只有名称匹配的组件会被缓存。
- exclude:匹配的组件都不会被缓存。
- max:数字。 --最多可以缓存多少组件实例。
注意:设置keep-alive会多出两个生命周期。(activated与deactivated)
11. vue常用的修饰符
修饰符是用于限定类型以及类型成员的声明的一种符号。
-
表单修饰符 v-model.trim
- trim :自动过滤用户输入的首空格字符,而中间的空格不会被过滤。
- number :自动将用户输入值转为数值类型。
-
事件修饰符 @click.stop
- stop :阻止事件冒泡。
- prevent : 阻止事件默认行为。
- once : 绑定事件只触发一次。
- native : 让组件变成像HTML内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件($emit)。
-
键盘修饰符 @keyup.enter
- 普通键 enter…
12. 自定义指令以及使用场景
通过Vue.directive(指令名字, 对象数据(指令函数))进行注册。
应用场景:
- 表单防止重复提交(节流)
- 图片懒加载
- 一键copy的功能
13. SPA和SSR有何异同
SPA:单页面应用(客户端渲染)
SSR:多页面应用(服务端渲染)
SPA应用只会首次请求HTML文件,(得到的是一个空的HTML),后续只需要请求JSON数据即可,用户体验更好,节约流量,服务端压力比较小。但是首屏加载的时间会变长,而且SEO不友好。为了解决以上,SSR方案,HTML内容在服务器一次性生成出来,首屏加载快,搜索引擎可以方便抓取页面信息。
14. vue项目中如何解决跨域问题
同源策略: 协议相同、主机相同、端口相同。 —若存在一个不同,就会产生跨域问题。文章来源:https://www.toymoban.com/news/detail-808220.html
- JSONP
- CORS —服务端设置
- Proxy —vue.config.js中设置
devServer: {
host: '127.0.0.1',
port: 8084,
open: true,// vue项目启动时自动打开浏览器
proxy: {
'/api': { // '/api'是代理标识,用于告诉node,url前面是/api的就是使用代理的
target: "http://xxx.xxx.xx.xx:8080", //目标地址,一般是指后台服务器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
'^/api': ""
}
}
}
}
15. vue3新特性相比于vue2
-
- Tree-shaking : 在vue2中很多函数都是挂载在全局Vue对象上,比如nexttick等,虽然我们可能用不到,但打包只要引入vue这些全局函数任然会打包进bundle中。 vue3采用ES6模块引入方式。
-
- 响应式API :采用ref和reactive创建响应式数据。
ref利用object.defieProperty(), reactive采用proxy()返回一个代理对象。文章来源地址https://www.toymoban.com/news/detail-808220.html
-
-
生命周期 :
beforeCreate ==> setup
create ==> setup
beforeMounted ==> onBeforeMounted
mounted ==> onMounted
beforeUpdate ==> onBeforeUpdate
updated ==> onUpdated
beforeUnmount ==> onBeforeUnmounted
unmounted ==> onUnmounted
-
生命周期 :
-
-
新组件:Fragment(没有根标签,多个标签包裹在一个Fragment虚拟元素中)
Teleport(组件HTML结构移动到指定位置)
Suspense(等待异步组件时渲染一些额外内容)
-
新组件:Fragment(没有根标签,多个标签包裹在一个Fragment虚拟元素中)
到了这里,关于前端面试 -- vue系列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!