Vue面试题
学习笔记记录,以便查阅
丹哥不是哥
热爱生活,努力发光
展开
-
[Vue][面试]你了解哪些vue性能优化的方法
你了解哪些vue性能优化的方法答题思路:根据题目描述,这里主要探讨Vue代码层面的优化路由懒加载keep-alive缓存页面使用v-show复用DOMv-for遍历避免同时使用v-if,实现方式举例<template> <ul> <li v-for="user in activeUsers" :key="user.id">{{user.name}}</li> </ul></te原创 2020-08-17 15:40:59 · 590 阅读 · 0 评论 -
[Vue][面试]谈谈你对MVC、MVP和MVVM的理解
谈谈你对MVC、MVP和MVVM的理解答题思路:此题涉及知识点很多,很难说清楚,说透彻,因为MVC,MVP这些我们前端程序员自己甚至都没用过。但是恰恰反映了前端这些年从无到有,从有到优的变迁过程,因此沿此思路回答将十分清除。Web1.0时代在web1.0时代,并没有前端的概念。开发一个web应用多数采用ASP.NET/Java/PHP编写,项目通常由多个aspx/jsp/php文件构成,每个文件中同时包含了HTML、CSS、JavaScript、C#/Java/PHP代码,系统整体架构可能如下图所原创 2020-08-17 15:39:23 · 557 阅读 · 0 评论 -
[Vue][面试]谈一谈对vue的设计原则的理解
谈一谈对vue的设计原则的理解思路:在vue官网上写着大大的定义和特点:-渐进式JavaScript框架-易用、灵活和高效渐进式JavaScript框架:与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的但应用提供驱动。易用性:vue提供数据响应式,声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可原创 2020-08-17 15:37:46 · 534 阅读 · 0 评论 -
[vue][面试]谈一谈对vue组件化的理解?
谈一谈对vue组件化的理解?思路:组件化定义,优点,使用场景和注意事项等方面展开陈述,同时要强调vue中组件化的一些特点。#####源码分析1:组件定义源码位置:src/core/global-api/assets.jsvue-loader会编译tempalte为render函数,最终导出的依然是组件配置对象。#####源码分析2:组件化优点lifecycle.js-mountComponent()组件、Watcher、渲染函数和更新函数之间的关系#####源码分析3:组件化实现构造函数,原创 2020-08-17 15:36:58 · 1015 阅读 · 0 评论 -
[Vue][面试]你怎么理解vue中的diff算法?
你怎么理解vue中的diff算法?#####源码分析1:必要性,lifecycle.js–mountComponent()vue中一个组件一个watcher实例,而组件中可能存在很多个data中的key的使用,为了精确地知道更新过程中到底哪里发生了变化,必须使用diff算法#####源码分析2:执行方式,patch.js–patchVnode()patchVnode是diff发生的地方,整体方案:深度优先,同层比较#####源码分析3:高效性,patch.js–updateChildren()算原创 2020-08-17 15:36:15 · 699 阅读 · 0 评论 -
[Vue][面试]你知道Vue中key的作用和工作原理吗?说说你对它的理解。
你知道Vue中key的作用和工作原理吗?说说你对它的理解。源码追溯:src/core/vdom/patch.js-updateChildren()结论1.key的主要作用是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操作量,提高性能。2.另外,若不设置key还可能在列表更新时引发一些隐藏的bug3.vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是原创 2020-08-17 15:35:17 · 2364 阅读 · 0 评论 -
[Vue][面试]v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?
v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能?Vue源码追溯阅读位置:compiler/codegen/index.js 64行结论1.显然v-for优先于v-if被解析(原因为源码中可以看到先执行v-for再执行v-if)2.如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能3.要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环...原创 2020-08-17 15:30:10 · 1048 阅读 · 0 评论 -
[Vue][面试]Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制?
Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制?源码追溯:src\core\instance\state.js–initData()函数每次执行都会返回全新data对象实例结论Vue组件可能存在多个实例,如果使用对象形式定义data,则会导致它们共用一个data对象,那么状态变更将会影响所有组件实例,这是不合理的;采用函数形式定义,在initData时会将其作为工厂函数返回全新data对象,有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制,也是因原创 2020-08-17 15:27:49 · 188 阅读 · 0 评论