前端面试 -- vue系列

这篇具有很好参考价值的文章主要介绍了前端面试 -- vue系列。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. vue理解:

核心特性:

    1. 数据驱动(MVVM)
      Model:模型层,负责处理业务逻辑以及和服务器端进行交互。
      View:视图层,负责将数据模型转化为UI展示出来,可以简单理解为HTML页面。
      ViewModel:视图模型层,用来连接Model和view,是Model和View之间的通信桥梁。
    1. 组件化
      图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发模式,在vue中每一个.vue文件都可以视为一个组件。
      优点:高内聚,低耦合;更好的复用;可维护性;扩展性。
    1. 指令系统
      指令是指带有v-前缀的特殊属性作用:当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM。
      v-if:条件渲染指令。
      v-for:列表渲染。
      v-bind:属性绑定。
      v-on:事件绑定。
      v-model:双向数据绑定。

2. SPA(单页面应用理解)

动态重写当前页面与用户交互,避免了页面之前切换而影响用户体验。他将所有的活动局限在一个web页面中,仅在该web页面初始化时加载相应的HTML,JS,CSS资源。一旦页面加载完成,spa不会因为用户操作而进行页面的重新加载或跳转,而是利用JS动态变化HTML从而实现交互。

  • 优点:
    1. 用户体验好,内容的改变不需要重新加载整个页面。
    2. 良好的前后端分离。
    3. 减轻服务器压力,只提供数据,不用负责逻辑与页面的合成。
  • 缺点:
    1. 不利于搜索引擎的抓取,所有内容都在一个页面中动态替换显示。

    2. 首次渲染速度相对较慢,为实现单页面web应用功能及显示,需要在加载页面的时候将JS、CSS同一加载,部分页面可在需要时加载,所以必须对JS及CSS代码进行合并压缩处理。

      | SPA | MPA
      组成 | 一个主页面和多个页面片段 | 多个主页面
      刷新方式 | 局部刷新 | 整页刷新
      url模式 | 哈希模式 | 历史模式
      SEO搜索引擎优化 | 难实现,可使用SSR方式改善 | 容易实现
      数据传递 | 容易 | 通过url,cookie,localStorage等传递
      页面切换 | 速度快、用户体验良好 | 切换加载资源、速度慢、用户体验不好
      维护成本 | 相对容易 | 相对复杂

3. vue实例挂载的过程

数据绑定 -》 数据渲染 -》 视图

    1. 初始化:执行一系列初始化操作,包括实例化Vue、初始化生命周期、事件系统、响应式数据等。
    1. 模板编译:vue对模板进行编译,将其转化为渲染函数,渲染函数接收数据并返回生成的虚拟DOM
    1. 挂载:当渲染函数生成虚拟DOM之后,vue会将渲染成真实DOM并将其挂载到指定目标元素上。
    1. 更新:实例被成功挂载后,如果响应式数据发生变化,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组件之间的通信方式有哪些

    1. 通过props传递:子组件设置props属性,定义接收父组件传递过来的参数。 --父给子传递
    1. e m i t 触发自定义事件:通过 emit触发自定义事件:通过 emit触发自定义事件:通过emit触发自定义事件。 --子给父传递
    1. ref:给子组件设置ref,父组件通过设置子组件ref获取数据。
    1. EventBus:Vue.prototypr.$bus = new Vue() 。 --兄弟组件之间传递
    1. a t t r s 和 attrs和 attrslisteners:–祖先传递数据给子孙。
    1. provide与inject:祖先组件定义provide属性,返回传递的值;在后代组件通过inject接收组件传递过来的值。 --祖先传递数据给子孙
    1. 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项目中如何解决跨域问题

同源策略: 协议相同、主机相同、端口相同。 —若存在一个不同,就会产生跨域问题。

  • 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

    1. Tree-shaking : 在vue2中很多函数都是挂载在全局Vue对象上,比如nexttick等,虽然我们可能用不到,但打包只要引入vue这些全局函数任然会打包进bundle中。 vue3采用ES6模块引入方式。
    1. 响应式API :采用ref和reactive创建响应式数据。

ref利用object.defieProperty(), reactive采用proxy()返回一个代理对象。文章来源地址https://www.toymoban.com/news/detail-808220.html

    1. 生命周期
      beforeCreate ==> setup
      create ==> setup
      beforeMounted ==> onBeforeMounted
      mounted ==> onMounted
      beforeUpdate ==> onBeforeUpdate
      updated ==> onUpdated
      beforeUnmount ==> onBeforeUnmounted
      unmounted ==> onUnmounted
    1. 新组件:Fragment(没有根标签,多个标签包裹在一个Fragment虚拟元素中)
      Teleport(组件HTML结构移动到指定位置)
      Suspense(等待异步组件时渲染一些额外内容)

到了这里,关于前端面试 -- vue系列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS前端高频面试

    JS数据类型有哪些,区别是什么 js数据类型分为原始数据类型和引用数据类型。 原始数据 类型包括:number,string,boolean,null,undefined,和es6新增的两种类型:bigint 和 symbol。(Symbol是一个函数,会返回一个Symbol类型的值,每个Symbol函数返回的都是唯一的,可以作为对象的k

    2024年02月22日
    浏览(46)
  • 【前端面试题——JS篇】

    Javascript的数据类型分为基本数据类型和复合数据类型; 基本数据类型有:数组,布尔,字符串,symbole,undefined,null 复合数据类型:object,function 基本数据类型存储在栈中 引用数据类型存储在堆中 Javascript 是一门单线程的语言,意味着同一时间内只能做一件事,但是这并不

    2023年04月18日
    浏览(27)
  • 【精选】前端JS面试题35个

    1.问:什么是匿名函数?作用是什么?           答:没有名字的函数就是匿名函数,作用有三,把函数当作变量赋值,把函数当作参数(回调函数),把函数当作另一个函数的返回值(闭包)         2.什么是回调函数?为什么需要回调函数?           答:一个被当作函数参数的函

    2024年02月12日
    浏览(33)
  • 【面试题系列】必须掌握的六大类型JS面试题

    🐱 个人主页: 不叫猫先生 ,公众号: 前端舵手 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏: vue3+vite+typeScript从入门到实践 📢 资料领取:前端进阶资料

    2024年02月08日
    浏览(41)
  • 前端基础面试题(HTML,CSS,JS)

    前后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库  web前端面试题库 VS java后端面试题库大全 代码结构:  使页面在没有css的情况下,也能够呈现出好的内容结构 有利于SEO:  爬虫根据标签来分配的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓

    2024年02月09日
    浏览(53)
  • 【前端面试手册】CSS系列-回流与重构

    本专栏收录于前端面试手册-CSS系列如果该文章对您有帮助还希望你能点一个小小的订阅,来增加博主创作的动力✍🏻话不多说开始进入正题 回流和重构在前端CSS中是一个常见的问题,那么你对回流何重构有哪些了解呢? 一、什么场景下会触发回流和重构,如何减少回流重构

    2024年02月11日
    浏览(56)
  • 常见前端基础面试题(HTML,CSS,JS)(三)

      类型转换可以分为两种, 隐性转换 和 显性转换 主要分为三大类:数值类型、字符串类型、布尔类型 三大类的原始类型值的转换规则我就不一一列举了 数值类型(引用类型转换) 字符串类型(引用类型转换) 类型 转换前 转换后 number 4 4 string \\\"1\\\" 1 string \\\"\\\" 0 boolean true 1 b

    2024年02月12日
    浏览(61)
  • ChatGPT给出的前端面试考点(html+css+JS)

    HTML HTML是什么,它的主要作用是什么? 什么是DOCTYPE,为什么在HTML文档中使用它? HTML5相对于之前的HTML版本有哪些主要的新特性? 解释语义化HTML的概念。为什么要使用语义化标签? 如何在HTML中嵌入JavaScript和CSS? 什么是表单,如何在HTML中创建一个表单? 什么是响应式图片

    2024年01月21日
    浏览(62)
  • 【图解面试】JS系列 - 如何回答数据类型相关问题(上)

    知识点大纲 语言组织(示例) 要点:数量 → 种类 → 区别 JS中的数据类型主要有 8 种,分为两大类 基础数据类型 和 引用数据类型 基础数据类型中主要有 Number、String、Boolean、Null、Undefined、Symbol和BigInt 引用数据类型有Object,Object下又有一些内置的子类主要分为基础引用类

    2024年01月16日
    浏览(34)
  • 前端面试题(第三弹)——js对象的基本方法和深浅拷贝

    第一种 第二种 1.configurable:属性是否可以通过delete删除,默认值为true。 2.enumberable:属性是否可以通过for in 进行循环返回,默认值为true。 3.writable:属性是否可被修改,默认值为true。 4.value:属性实际的值,默认为undefined。 访问器属性有四个属性类型,也是使用Object.defin

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包