- 博客(50)
- 收藏
- 关注
RSS订阅原创 面试官：说说Vue 3.0中Treeshaking特性？举例说明一下？
如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去。实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫。中，无论我们使用什么功能，它们最终都会出现在生产代码中。简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。再一次打包，发现打包出来的体积并没有变化。
2024-11-12 15:13:36
452
原创 面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？
项目的目录结构很重要，因为目录结构能体现很多东西，怎么规划目录结构可能每个人有自己的理解，但是按照一定的规范去进行目录的设计，能让项目整个架构看起来更为简洁，更加易用。这样做的好处在于，无论你的模块文件夹内部有多乱，外部引用的时候，都是从一个入口文件引入，这样就很好的实现了隔离，如果后续有重构需求，你就会发现这种方式的优点。文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹。文件夹，里面放着所有的项目需要的资源，
2024-10-12 18:23:52
409
原创 什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。
2024-10-11 11:23:04
1392
原创 vue3有了解过吗？能说说跟vue2的区别吗？
关于vue3的重构背景，尤大是这样说的：「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」利用新的语言特性(es6)解决架构问题。
2024-09-30 11:35:21
1179
原创 面试官：vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过。菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识。路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转。按需挂载，路由就需要知道用户的路由权限，也就是在用户登录进来的时候就要知道当前用户拥有哪些路由权限。如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理。
2024-09-24 18:00:47
824
原创 面试官：Vue.observable你有了解过吗？说说看
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。源码位置：src\core\observer\index.js。，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。变更，它和被返回的对象是同一个对象。在非父子组件通信时，可以使用通常的。，让一个对象变成响应式数据。中，被传入的对象会直接被。翻译过来我们可以理解成。
2024-09-23 09:48:12
681
原创 面试官：Vue中的$nextTick有什么作用？
在修改数据之后立即使用这个方法，获取更新后的 DOM。将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行。每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了。如果我们一直修改相同数据，异步操作队列还会进行去重。，而是将修改数据的操作放在了一个异步操作队列中。如果想要在修改数据后立刻得到更新后的。节点，却发现获取到的是旧值。机制，只需要更新一次，所以。数据在发现变化的时候，
2024-09-20 09:14:56
722
原创 面试官：Vue实例挂载的过程
源码位置：src\platforms\web\runtime\index.js。源码位置：src\core\instance\lifecycle.js。源码位置：src\core\instance\render.js。源码位置：src\core\instance\index.js。源码位置：src\core\instance\state.js。源码位置：src\core\instance\init.js。过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等。的时候，数据已经初始化完成，能够访问。
2024-09-19 09:22:58
1092
原创 面试官：Vue常用的修饰符有哪些有什么应用场景
事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给。使用.native修饰符来操作普通HTML标签是会令事件失效的。在移动端，当我们在监听元素滚动事件的时候，会一直触发。在我们填完信息，光标离开标签的时候，才会将值赋予给。自动过滤用户输入的首空格字符，而中间的空格不会过滤。内置标签那样监听根元素的原生事件，否则组件上使用。
2024-09-18 18:28:39
1047
原创 面试官：说说你对vue的mixin的理解，有什么应用场景？
在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立。类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。通过观察上面两个组件，发现两者的逻辑是相同，代码控制显示也是相同的，这时候。是面向对象程序设计语言中的类，提供了方法的实现。但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行。对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖。对象的选项都将被混入该组件本身的选项中来。PS：全局混入常用于插件的编写。
2024-09-14 09:18:58
813
原创 面试官：你知道vue中key的原理吗？说说你对它的理解
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点。，然后将比对出的结果用来更新真实的。那么这背后的逻辑是什么，
2024-09-11 10:13:59
608
原创 面试官：说说你对keep-alive的理解是什么？
值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。中缓存组件的数量是否超过了设置的最大缓存数量值。表明该组件还没有被缓存过，则以该组件的。缓存的组件被激活的时候，都会执行。
2024-09-11 10:13:26
640
原创 面试官：v-if和v-for的优先级是什么？
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回。作用在不同标签时候，是先进行判断，再进行列表的渲染。模板编译的时候，会将指令系统转化成可执行的。的列表渲染函数，函数内部都会进行一次。指令基于一个数组来渲染一个列表。是源数据数组或者对象，而。则是被迭代的数组元素的别名。形式的特殊语法，其中。模板指令的代码都会生成在。值是独一无二的，这便于。这时候我们可以看到，
2024-09-11 10:12:49
632
原创 面试官：Vue中的过滤器了解吗？过滤器的应用场景有哪些？
在组件的选项中定义本地的过滤器filters: {if (!if (!})new Vue({// ...})注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize过滤器函数将会收到message的值作为第一个参数在这个例子中，filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将。
2024-09-09 21:15:03
1345
原创 面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？
开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model和v-show)，Vue也允许注册自定义指令。
2024-09-06 10:23:16
1599
原创 面试官：你了解vue的diff算法吗？说说看
第三次循环中，发现E没有找到，这时候只能直接创建新的真实节点 E，插入到第二次创建的 C 节点之后。之间的所有节点，也就是节点F，直接创建 F 节点对应的真实节点放到 B 节点后面。后创建了 A 的真实节点，插入到前一次创建的 E 节点后面。后创建了 C 的真实节点插入到第一次创建的 D 节点后面。后创建了 B 真实节点 插入到前一次创建的 A 节点后面。第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理，第一次循环后，发现旧节点D与新节点D相同，直接复用旧节点D作为。
2024-09-05 09:51:42
1521
1
原创 面试官：Vue项目中你是如何解决跨域的呢？
代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。发送请求中，配置请求的根路径。
2024-09-03 22:08:54
2733
原创 面试官：请描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？
请描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？
2024-08-25 10:39:01
1198
原创 面试官：v-show和v-if有什么区别？使用场景分别是什么？
是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示。如果需要非常频繁地切换，则使用 v-show 较好。如果在运行时条件很少改变，则使用 v-if 较好。不管初始条件是什么，元素总是会被渲染。的时候不会触发组件的生命周期。有更高的初始渲染消耗；要复杂的多，因为还有。
2024-08-24 16:29:18
721
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人