VUE面试题汇总(七)

news/2024/7/10 1:05:31 标签: javascript, vue.js, vue, 前端, 面试

往期点这里:↓
VUE面试题汇总(一)
VUE面试题汇总(二)
VUE面试题汇总(三)
VUE面试题汇总(四)
VUE面试题汇总(五)
VUE面试题汇总(六)
61. vue 的优点是什么?

参考答案:

低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。

可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

可测试。界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。

62. vue 如何实现按需加载配合 webpack 设置

参考答案:
webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入,改为 const 定义的方式进行引入。

//不进行页面按需加载引入方式:
import home from '../../common/home.vue'
//进行页面按需加载的引入方式:
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

在音乐 app 中使用的路由懒加载方式为:

const Recommend = (resolve) => {
  import('components/recommend/recommend').then((module) => {
    resolve(module)
  })
}

const Singer = (resolve) => {
  import('components/singer/singer').then((module) => {
    resolve(module)
  })
}

63. 如何让 CSS 只在当前组件中起作用

参考答案:
将当前组件的 <style> 修改为 <style scoped>

64. 指令 v-el 的作用是什么?

参考答案:

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标. 可以是 CSS 选择器,也可以是一个 HTMLElement 实例

65. vue-loader 是什么?使用它的用途有哪些?

参考答案:

vue-loader 是解析 . vue 文件的一个加载器,将 template/js/style 转换成 js 模块。

用途:js 可以写 es6、style 样式可以 scss 或 less;template 可以加 jade 等。

66. vue和angular的优缺点以及适用场合?

参考答案:

学习web前端开发中,会有很多的框架,那么目前流行的框架有哪些,以及他们的优缺点和应用场景有哪些呢?

一、Vue.js:

其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的

Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统

Vue.js的特性如下:

   1.轻量级的框架

   2.双向数据绑定

   3.指令

   4.插件化

优点: 1. 简单:官方文档很清晰,比 Angular 简单易学。

     2. 快速:异步批处理方式更新 DOM。

     3. 组合:用解耦的、可复用的组件组合你的应用程序。

     4. 紧凑:~18kb min+gzip,且无依赖。

     5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。

     6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

  缺点:

     1. 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
     3. 不支持IE8:2. 新生儿:Vue.js是一个新的项目,没有angular那么成熟。

应用场景:小型应用

二、angularJS:

  angularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

  angularJS的特性如下:

    1.良好的应用程序结构

    2.双向数据绑定

    3.指令

    4.HTML模板

    5.可嵌入、注入和测试

  优点:

      1. 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;
      2. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
      3. 模板功能强大丰富,自带了极其丰富的angular指令。
      4. 自定义指令,自定义指令后可以在项目中多次使用。
      5. angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。

  缺点:

   1. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
   2. angular 入门很容易 但深入后概念很多, 学习中较难理解
   3. DI 依赖注入 如果代码压缩需要显示声明.
   4. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
   5. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作

    
应用场景:在大型超大型web应用开发上。

三、React:

  React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

  React特性如下: 
    1.声明式设计:React采用声明范式,可以轻松描述应用。

    2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。

    3.灵活:React可以与已知的库或框架很好地配合。

优点:

  1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
  2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
  3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
  4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。
  5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。
  6. 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点:

React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

应用场景:个性化需求、中型应用

67. 你们vue项目是打包了一个js文件,一个css文件,还是有多个文件?

参考答案:
dist文件夹下:

  1. css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候,会把所有的css样式打包到这里
  2. css文件夹下的.css.map文件是一个Source map文件,Source
    map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码,只是方便我们开发的时候做调试使用。
  3. js文件夹下的.js.map依然是Source map文件,方便我们开发时调试js代码使用。
  4. app.js文件里放的是项目中各个页面的逻辑代码
  5. vendor.js放的是各个页面各个组件公用的一些代码

68. vue遇到的坑,如何解决的?

参考答案:

1.vue2.x不能通过数组下标操作数组
2.事件冒泡

69. vuex 工作原理详解

参考答案:

vuex 整体思想诞生于 flux, 可其的实现方式完完全全的使用了 vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理,vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件;

解析:vuex的原理其实非常简单,它为什么能实现所有的组件共享同一份数据?
因为vuex生成了一个store实例,并且把这个实例挂在了所有的组件上,所有的组件引用的都是同一个store实例。
store实例上有数据,有方法,方法改变的都是store实例上的数据。由于其他组件引用的是同样的实例,所以一个组件改变了store上的数据, 导致另一个组件上的数据也会改变,就像是一个对象的引用。

70. vuex 是什么?怎么使用?哪种功能场景使用它?

参考答案:

vue 框架中状态管理。在 main. js 引入 store,注入。新建一个目录 store,…. . export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

main. js:

import store from './store'

new Vue({
el:'#app',
store
})

http://www.niftyadmin.cn/n/805915.html

相关文章

脸皮厚了与哲哥合影!Cocos北京站沙龙带回的照片,猜猜我是谁?

大家好&#xff0c;我是玻璃小屋「杨宗宝」12月12日&#xff0c;Cocos来北京啦&#xff01;除了带了最新的 Cocos Creator 3.0 之外&#xff0c;还有市值上亿的在线教育领域的大佬分享如&#xff1a;作业帮、万达、字节跳动教育等&#xff01;Cocos 绝不止于游戏&#xff0c;而…

MTS管理自动化 (转)

MTS管理自动化 (转)[more]MTS管理自动化 关键词&#xff1a;vbscript MTS&#xff08;microsoft Transactin Server&#xff09;是构筑安全、稳定的INTE.NET/INTRANET应用的基础&#xff0c;在引进事务的概念后&#xff0c;你不用担心你的应用在崩溃时造成数据的不完整性。 在A…

VUE面试题汇总(八)

往期点这里&#xff1a;↓ VUE面试题汇总&#xff08;一&#xff09; VUE面试题汇总&#xff08;二&#xff09; VUE面试题汇总&#xff08;三&#xff09; VUE面试题汇总&#xff08;四&#xff09; VUE面试题汇总&#xff08;五&#xff09; VUE面试题汇总&#xff08;六&…

【JVM系列】HotSpot回收算法细节

HotSpot算法细节 发起内存回收 安全点 安全点如何选取 数量&#xff1a;其选定的既不能太少以至于让收集器等待时间过长&#xff0c;也不能太过频繁以至于过分增大运行时的内存负荷。位置&#xff1a;安全点位置的选取基本上是以“是否具有让程序长时间执行的特征”为标准进…

java 发送邮件email

发送邮件 一、添加maven依赖&#xff1a; <dependency> <groupId>com.sun.mail</groupId> <artifactId>javax.mail</artifactId> <version>1.6.0</version> </dependency> 二、email工具类 import com.jfinal.log.Log; i…

在VB6中导出EXCEL,FOXPRO,PRODOX格式的表 (转)

在VB6中导出EXCEL&#xff0c;FOXPRO&#xff0c;PRODOX格式的表 (转)[more]MIS系统在月末由于业务的需要总要汇总当月业务情况&#xff0c;并且导出报盘&#xff0c;我把我的程序中的这一部分功能单拿出来&#xff0c;做成一个小的程序&#xff0c;仅供参考。 一般是在ACCESS或…

Android窗口管理服务WindowManagerService的简要介绍和学习计划

在前一个系列文章中&#xff0c;我们从个体的角度来分析了Android应用程序窗口的实现框架。事实上&#xff0c;如果我们从整体的角度来看&#xff0c;Android应用程序窗口的 实现要更复杂&#xff0c;因为它们的类型和作用不同&#xff0c;且会相互影响。在Android系统中&#…

绝!2D素材3D效果!

用2D素材实现3D效果!前言好久没写教程笔记了&#xff0c;不知大伙是否想念教程了&#xff1f;温馨提示&#xff1a;所有内容纯属个人瞎玩研究&#xff0c;如要上线项目&#xff0c;请自行评估~ oh最近逛论坛&#xff0c;看到有一位小伙伴想实现下面这种透视效果。预期效果接着&…