最新公告
  • 欢迎您光临站壳网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • Vue常见面试题整理(2021版)

    Vue常见面试题整理(2021版) 最后编辑:2021-05-27
    增值服务: 自动发货 使用说明 安装指导 环境配置二次开发BUG修复
    • 1.说一下Vue的生命周期, Cred Sweep 擁有出色的生命週期

    • 2.CSS只在当前组件起作用的关键字?

    • 3.v-if 和 v-show 区别

    • 4.`router的区别`

    • 5.vue.js的两个核心是什么?

    • 6.vue几种常用的指令

    • 7.vue常用的修饰符

    • 8.v-on 可以绑定多个方法吗?

    • 9.vue中 key 值的作用?

    • 10.什么是vue的计算属性?

    • 11.vue等单页面应用及其优缺点

    • 12.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

    • 13.绑定 class 的数组用法

    • 14. Vue的双向数据绑定原理是什么?

    • 15. 对于MVVM的理解?

    • 16. Vue组件间的参数传递(通信方式)

    • 17. Vue的路由实现:hash模式 和 history模式

    • 18. vue路由的钩子函数

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

    • 20. vue-cli如何新增自定义指令?

    • 21. vue如何自定义一个过滤器?

    • 22. 对keep-alive 的了解?

    • 23. v-model的实现原理

    • 24. 简单说一下Vue2.x响应式数据原理

    • 25. 你知道Vue3.x响应式数据原理吗?

    • 26.nextTick知道吗,实现原理是什么?

    • 27. 说一下Computed和Watch

    • 28.组件中的data为什么是一个函数?

    • 29. Vue事件绑定原理说一下

    • 30. Vue模版编译原理知道吗,能简单说一下吗?

    • 31. Vue2.x和Vue3.x渲染器的diff算法分别说一下

    • 32. 说一下虚拟Dom以及key属性的作用

    • 33. Vue中组件生命周期调用顺序说一下

    • 34. 常见的哪些Vue性能优化?

    • 35. 计算属性computed和 监听watch 的区别



    由于网络上VUE面试题偏少且过于杂乱,笔者整理网上的一些常见的面试题,如有疏漏,欢迎留爪指点,本人会及时修正。

    1.说一下Vue的生命周期

    答:

    beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

    created在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。可以做一些初始数据的获取,在当前阶段无法与Dom进行交互,如果非要想,可以通过vm.$nextTick来访问Dom。

    beforeMount发生在挂载之前,在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。

    mounted在挂载完成后发生,在当前阶段,真实的Dom挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用 $refs属性对Dom进行操作。

    beforeUpdate发生在更新之前,也就是响应式数据发生更新,虚拟dom重新渲染之前被触发,你可以在当前阶段进行更改数据,不会造成重渲染。

    updated发生在更新完成之后,当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新。

    beforeDestroy发生在实例销毁之前,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器。

    destroyed发生在实例销毁之后,这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。

    1.1 什么是vue生命周期?

    答:Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

    1.2 vue生命周期的作用是什么?答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    1.3 vue生命周期总共有几个阶段?

    答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

    1.4 第一次页面加载会触发哪几个钩子?

    答:会触发 下面这几个beforeCreate, created, beforeMount, mounted

    1.5 DOM 渲染在 哪个周期中就已经完成?

    答:DOM 渲染在 mounted 中就已经完成了。

    2.CSS只在当前组件起作用的关键字?

    答:在style标签中写入scoped即可 例如:<style scoped></style>

    3.v-if 和 v-show 区别

    答:v-if按照条件是否渲染,v-show是display的block或none;

    使用:频繁切换时该用v-show,运行时较少改变时用v-if

    4.$route和 $router的区别

    答:$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

    5.vue.js的两个核心是什么?

    答:数据驱动、组件系统

    6.vue几种常用的指令

    答:v-for 、 v-if 、v-bind、v-on、v-show、v-else

    7.vue常用的修饰符

    答:.prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用

    8.v-on 可以绑定多个方法吗?

    答:可以

    9.vue中 key 值的作用?

    答:当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

    10.什么是vue的计算属性?

    答:在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式。

    好处:

    ①使得数据处理结构清晰;

    ②依赖于数据,数据更新,处理结果自动更新;

    ③计算属性内部this指向vm实例;

    ④在template调用时,直接写计算属性名即可;

    ⑤常用的是getter方法,获取数据,也可以使用set方法改变数据;

    ⑥相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算。

    11.vue等单页面应用及其优缺点

    答:

    优点:Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

    缺点:不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。

    12.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

    答:在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 router 对象的 params.id 获取。

    13.绑定 class 的数组用法

    <!-- 逗号分隔字符串,只有组件a与b被缓存。 -->
    <keep-alive include="a,b">
      <component></component>
    </keep-alive>

    <!-- 正则表达式 (需要使用 v-bind,符合匹配规则的都会被缓存) -->
    <keep-alive :include="/a|b/">
      <component></component>
    </keep-alive>

    <!-- Array (需要使用 v-bind,被包含的都会被缓存) -->
    <keep-alive :include="['a', 'b']">
      <component></component>
    </keep-alive>

    23. v-model的实现原理

    答:

    v-model只不过是一个语法糖而已,

    对于一个带有 v-model 的输入框组件,它应该:接收一个 value prop,触发 input 事件,并传入新值。

    自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以),然后给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传入

    24. 简单说一下Vue2.x响应式数据原理

    答:

    Vue在初始化数据时,会使用Object.defineProperty重新定义data中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

    25. 你知道Vue3.x响应式数据原理吗?

    答:

    Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

    Proxy只会代理对象的第一层,那么Vue3又是怎样处理这个问题的呢?

    判断当前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理, 这样就实现了深度观测。

    监测数组的时候可能触发多次get/set,那么如何防止触发多次呢?

    我们可以判断key是否为当前被代理对象target自身属性,也可以判断旧值与新值是否相等,只有满足以上两个条件之一时,才有可能执行trigger。

    26.nextTick知道吗,实现原理是什么?

    答:

    在下次 DOM 更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用 Promise、 MutationObserver、 setImmediate、 ,如果都不行则采用setTimeout

    定义了一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法清空当前队列。其实问框架最终还是考验原生JavaScript功底

    27. 说一下Computed和Watch

    答:

    Computed本质是一个具备缓存的watcher,依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时,在模板中放入过多逻辑会让模板难以维护,可以将复杂的逻辑放入计算属性中处理。

    Watch没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。当我们需要深度监听对象中的属性时,可以打开deep:true选项,这样便会对对象中的每一项进行监听。这样会带来性能问题,优化的话可以使用字符串形式监听,如果没有写到组件中,不要忘记使用unWatch手动注销哦。

    28.组件中的data为什么是一个函数?

    答:

    一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

    29. Vue事件绑定原理说一下

    答:

    原生事件绑定是通过addEventListener绑定给真实元素的,组件事件绑定是通过Vue自定义的$on实现的。

    30. Vue模版编译原理知道吗,能简单说一下吗?

    答:

    Vue的编译过程就是将template转化为render函数的过程。会经历:生成AST树,优化,codegen 阶段。

    首先解析模版,生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。使用大量的正则表达式对模板进行解析,遇到标签、文本的时候都会执行对应的钩子进行相关处理。

    Vue的数据是响应式的,但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化,对应的DOM也不会变化。那么优化过程就是深度遍历AST树,按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对,对运行时的模板起到很大的优化作用。编译的最后一步是将优化后的AST树转换为可执行的代码。

    31. Vue2.x和Vue3.x渲染器的diff算法分别说一下

    答:

    diff算法有以下过程:

    同级比较,再比较子节点

    先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点,将旧的子节点移除)

    比较都有子节点的情况(核心diff)

    递归比较子节点

    正常Diff两个树的时间复杂度是O(n^3),但实际情况下我们很少会进行跨层级的移动DOM,所以Vue将Diff进行了优化,从O(n^3) -> O(n),只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。Vue2的核心Diff算法采用了双端比较的算法,同时从新旧children的两端开始进行比较,借助key值找到可复用的节点,再进行相关操作。相比React的Diff算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅。

    在创建VNode时就确定其类型,以及在mount/patch的过程中采用位运算来判断一个VNode的类型,在这个基础之上再配合核心的Diff算法,使得性能上较Vue2.x有了提升,还运用动态规划的思想求解最长递归子序列。

    32. 说一下虚拟Dom以及key属性的作用

    答:

    由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM,会产生一定的性能问题。这就是虚拟Dom的产生原因。

    Vue2的Virtual DOM借鉴了开源库snabbdom的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类,它定义在src/core/vdom/vnode.js中。)

    VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。key的作用是尽可能的复用 DOM 元素。

    新旧 children 中的节点只有顺序是不同的时候,最佳的操作应该是通过移动元素的位置来达到更新的目的。需要在新旧 children 的节点中保存映射关系,以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。

    33. Vue中组件生命周期调用顺序说一下

    组件的调用顺序都是先父后子,渲染完成的顺序是先子后父

    组件的销毁操作是先父后子,销毁完成的顺序是先子后父

    34. 常见的哪些Vue性能优化?

    编码阶段:

    尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher

    v-if和v-for不能连用

    如果需要使用v-for给每项元素绑定事件时使用事件代理

    SPA 页面采用keep-alive缓存组件

    在更多的情况下,使用v-if替代v-show

    key保证唯一

    使用路由懒加载、异步组件

    防抖、节流

    第三方模块按需导入

    长列表滚动到可视区域动态加载

    图片懒加载

    打包优化

    压缩代码

    Tree Shaking/Scope Hoisting

    使用cdn加载第三方模块

    多线程打包happypack

    splitChunks抽离公共文件

    sourceMap优化

    还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

    35. 计算属性computed和 监听watch 的区别

    计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。

    1、computed 是一个对象时,它有哪些选项?有get和set两个选项

    2、computed 和 methods 有什么区别?methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会

    3、computed 是否能依赖其它组件的数据?computed可以依赖其他computed,甚至是其他组件的data

    4、watch 是一个对象时,它有哪些选项?handler deep 是否深度 immeditate 是否立即执行

    总结

    当有一些数据需要随着另外一些数据变化时,建议使用computed。当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher


    参考

    https://segmentfault.com/a/1190000016344599

    https://juejin.cn/post/6844904084374290446

    https://my.oschina.net/u/4258425/blog/4327462

    https://juejin.cn/post/6844903918753808398

    https://juejin.cn/post/6844904084374290446

    https://www.php.cn/js-tutorial-457006.html

    https://zhuanlan.zhihu.com/p/92407628

    https://www.php.cn/js-tutorial-457074.html

    文中脚注

    [1]

    vue的双向绑定原理及实现: https://www.cnblogs.com/libin-1/p/6893712.html



    您的看和点赞对我真的很重要!


    留言藏着这里哟~


    猜你在找

    RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
    找源码|源码教程|小程序|免费源码 » Vue常见面试题整理(2021版)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台
    • 2021-03-19Hi,初次和大家见面了,请多关照!

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 80027422@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者
    • 79会员总数(位)
    • 60资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 445稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情