![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue面试
文章平均质量分 57
王 歪歪
不要等你准备好再去尝试,因为永远都准备的不够好
展开
-
在前端开发中用到了哪些设计模式?
定义一系列的算法,将每个算法封装起来,并使他们可以互相转换,在前端开发中常用于根据不同的策略处理相同类型的数据或事件,例如表单验证、排序算法等。定义一个用于创建对象的接口,由子类决定实例化哪个类,在前端开发中常用于根据不同的条件或配置创建不同类型的对象,例如组件工厂、路由工厂。将一个类的接口转换为客户希望的另一个接口,在前端开发中,常用于解决不同组件库的接口不兼容的问题,或对外部数据进行格式转换。双向数据绑定的原理就是观察者模式。遍历数组、集合或异步数据流。原创 2024-04-08 12:04:20 · 535 阅读 · 0 评论 -
什么是命名空间?
在前端开发中,命名空间(Namespace)是一种组织和管理代码的技术。它可以避免不同库或组件之间的命名冲突,并提供一种结构化的方式来组织和访问代码。在JavaScript中,由于所有的代码都运行在同一个全局命名空间下,不同的库或组件可能会定义相同的函数名、变量名或对象名,导致冲突和错误。为了解决这个问题,可以使用命名空间将相关的代码封装在一个独立的命名空间中。命名空间可以是一个对象,它包含了一组相关的函数、变量和对象。通过将代码放置在命名空间中,可以避免全局命名冲突,并提供更好的代码组织和可维护性。原创 2024-03-20 13:07:15 · 333 阅读 · 0 评论 -
前端路由history路由和hash路由的区别?原理?
前端路由是指在单页应用程序(SPA)中通过改变 URL 路径来实现页面切换和导航的机制。在前端开发中,有两种主要的前端路由实现方式:基于 History API 的路由(history-based routing)和基于哈希(Hash)的路由(hash-based routing)。需要注意的是,基于 History API 的路由在现代浏览器中更为常见和推荐,因为它提供了更加优雅和语义化的 URL 结构,而且不会造成页面跳转时出现闪烁的问题。原创 2024-03-19 21:56:01 · 443 阅读 · 0 评论 -
什么是web workers?使用场景?
Web Workers 可以执行 JavaScript 代码,但它们与主线程相互独立,拥有自己的全局作用域,无法直接访问 DOM,也不能执行与界面相关的操作。总结起来,Web Workers 是一种允许在后台运行脚本的技术,使得 Web 应用程序能够利用多线程处理复杂任务,提高性能和响应能力。Dedicated Workers(专用 Web Workers):这是最常用的类型,每个 Dedicated Worker 都与一个脚本文件关联,它在独立的线程中执行该脚本文件。然而,某些任务,特别是。原创 2024-03-17 13:34:19 · 747 阅读 · 0 评论 -
有关promise手撕代码(手写题)
【代码】有关promise手撕代码(手写题)原创 2024-03-17 13:27:38 · 188 阅读 · 0 评论 -
强缓存和协商缓存的区别?
协商缓存和强缓存是 HTTP 缓存机制中的两种不同的策略,用于减少网络请求并提高网页加载速度。它们之间的主要区别在于和。原创 2024-03-13 14:59:53 · 566 阅读 · 0 评论 -
组合式(composition)API和选项式(options)API的区别?
组合式(composition)API和选项式(options)API是Vue.js中两种不同的组件API风格。原创 2024-03-13 16:22:20 · 1140 阅读 · 0 评论 -
vue2和vue3的区别?
Vue 3在底层进行了重写,重写了虚拟DOM的实现,优化Tree- Shaking,使用了更高效的响应式系统,提供了更快的渲染速度和更小的包体积。Vue 3虚拟 DOM 的优化,提高了渲染性能。原创 2024-03-13 15:33:54 · 357 阅读 · 1 评论 -
跨域的几种方式?(详解)
跨域(Cross-Origin)指的是在浏览器环境中,当一个网页的 JavaScript 代码试图访问不同源(Origin)的资源时发生的安全限制。同源策略(Same-Origin Policy)要求网页只能与同一源(协议、域名、端口)的资源进行交互,限制了跨域请求。原创 2024-03-13 14:44:37 · 304 阅读 · 0 评论 -
重绘和重排的区别?
重绘”(Repaint)和"重排"(Reflow)是两个关键概念,它们描述了浏览器渲染页面时的不同过程和影响。重绘(Repaint)指的是浏览器。当元素的***可见样式属性(如颜色、背景色、边框等)***发生改变时,浏览器会重新绘制该元素,使其呈现新的样式。重绘的代价相对较低,因为它只会更新元素的外观,而不会引起布局的改变。重排(Reflow)指的是。当页面的结构或元素的尺寸、位置等发生改变时,浏览器会重新计算元素的布局,并重新排列它们的位置。原创 2024-03-13 14:27:45 · 308 阅读 · 0 评论 -
函数柯里化的理解,柯里化有什么用处?
部分应用(Partial Application):柯里化允许我们部分应用函数,即通过固定函数的一部分参数,生成一个新的函数。通过将参数逐个传递给柯里化函数,可以推迟函数的实际执行,直到所有参数都准备就绪。函数复用:柯里化可以将一个多参数函数转化为接受更少参数的函数序列。函数组合:柯里化可以与函数组合技术结合使用,使函数的组合更加简洁和可读。这些示例展示了函数柯里化在 JavaScript 中的应用,以及它如何增加代码的灵活性、复用性、延迟执行和函数组合能力。通过柯里化,我们可以。原创 2024-03-13 14:17:23 · 763 阅读 · 0 评论 -
原型和原型链的区别,__proto__和prototype的区别
在JavaScript中,每个对象都有一个原型(prototype),原型是一个对象,它包含共享属性和方法的对象。JavaScript使用原型链(prototype chain)来实现对象之间的继承关系。原创 2024-03-13 09:35:17 · 889 阅读 · 0 评论 -
vue中双向数据绑定v-model的理解
vue采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。原创 2024-03-13 09:25:52 · 307 阅读 · 0 评论 -
Pinia和Vuex有什么区别?
Pinia的API设计更加简洁和直观。它采用了类似于Vue Composition API的风格,使用了更加现代化的语法和概念。相比之下,Vuex的API设计较为传统,使用了基于对象和字符串的方式来定义和访问状态。原创 2024-03-13 08:47:31 · 789 阅读 · 0 评论 -
Vue中的数据交互有几种方式
Vue中的数据流是单向的,从父组件传递到子组件。父组件可以通过props将数据传递给子组件,子组件通过props接收并使用这些数据。这种方式适用于父子组件之间的简单通信。原创 2024-03-13 08:31:53 · 458 阅读 · 0 评论 -
在vue中什么是虚拟DOM?
4.当应用的状态发生变化时,Vue会使用虚拟DOM来进行高效的更新。它通过比较新旧虚拟DOM树的差异,找出需要更新的部分,并将这些差异应用到真实的DOM上。这个对象树称为虚拟DOM树,它和真实的DOM具有相似的结构,但只存在于JavaScript内存中。5.虚拟DOM的好处在于它可以批量处理DOM的更新,在内存中进行操作,减少了直接操作真实DOM的次数。虚拟DOM是Vue中的一种优化技术,通过抽象真实的DOM为JavaScript对象树,实现高效的DOM更新和渲染,从而提升前端应用的性能和用户体验。原创 2024-03-12 17:40:35 · 469 阅读 · 0 评论 -
服务端渲染SSR的基本步骤?
服务端渲染(Server-Side Rendering,SSR)是一种将网页的渲染过程从客户端转移到服务器端的技术。原创 2024-03-12 17:16:20 · 350 阅读 · 0 评论 -
描述下Vue自定义指令
全局定义:Vue.directive(“focus”,{})局部定义:directives:{focus:{}}钩子函数:指令定义对象提供钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inSerted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。update:所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变,也可能没有。原创 2024-03-07 17:32:12 · 543 阅读 · 0 评论 -
Vue template到render过程,以及render的调用时机
深度遍历AST,查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点,他们生成的DOM永远不会改变,这对运行时模板更新起到了极大的优化作用。解析过程:利用正则表达式顺序解析模板,当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数,来达到构造AST树的目的。parse的目标:把tamplate转换为AST树,它是一种用 JavaScript对象的形式来描述整个模板。这个过程主要分析出哪些是静态节点,给其打一个标记,为后续更新渲染可以直接跳过静态节点做优化。原创 2024-03-07 17:25:58 · 545 阅读 · 0 评论 -
在vue中$nextTick 原理及作用
2.同时由于 VirtualDOM 的引入,每一次状态发生变化后,状态变化的信号会发送给组件,组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点,然后对 DOM 进行更新操作,每次更新状态后的渲染过程需要更多的计算,而这种无用功也将浪费更多的性能,所以异步渲染变得更加至关重要。因为在created()钩子函数中,页面的DOM还未渲染,这时候也没办法操作DOM,所以,此时如果想要操作DOM,必须将操作的代码放在nextTick()的回调函数中。原创 2024-03-03 17:45:29 · 651 阅读 · 0 评论 -
在vue中对keep-alive的理解,它是如何实现的,具体缓存的是什么?
如果需要在组件切换的时候,保存一些组件的状态防止多次渲染,就可以使用 keep-alive 组件包裹需要保存的组件。原创 2024-03-03 17:39:26 · 911 阅读 · 0 评论 -
vue面试题:如何保存页面的当前的状态?
在这里面需要注意的是组件更新状态的时机。比如从 B 组件跳转到 A 组件的时候,A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候,实际上是希望 B 组件重新渲染的,也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性,用来控制 A 组件是否读取 Storage 中的状态。如果 B 组件后退或者下一页跳转并不是前组件,那么 flag 判断会失效,导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage,会造成很奇怪的现象。原创 2024-03-03 17:27:09 · 580 阅读 · 0 评论 -
vue面试题:过滤器的作用,如何实现一个过滤器
根据过滤器的名称,过滤器是用来过滤数据的,在Vue中使用filters来过滤数据,filters不会修改数据,而是过滤数据,改变用户看到的输出(计算属性 computed ,方法 methods 都是通过修改数据来处理数据格式的输出显示)。过滤器是一个函数,它会把表达式中的值始终当作函数的第一个参数。比如后端返回一个 年月日的日期字符串,前端需要展示为 多少天前 的数据格式,此时就可以用fliters过滤器来处理数据。需要格式化数据的情况,比如需要处理时间、价格等数据格式的输出 / 显示。原创 2024-03-02 12:49:32 · 853 阅读 · 0 评论 -
vue面试题: slot是什么?有什么作用?原理是什么?
当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm.$ slot中,默认插槽为vm.$ slot.default,具名插槽为vm.$ slot.xxx,xxx 为插槽名,当组件执行渲染函数时候,遇到slot标签,使用$slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。又名匿名插槽,当slot没有指定name属性值的时候一个默认显示插槽,一个组件内只有有一个匿名插槽。带有具体名字的插槽,也就是带有name属性的slot,一个组件可以出现多个具名插槽。原创 2024-03-02 12:41:04 · 272 阅读 · 0 评论 -
vue面试题:Computed 和 Watch 的区别?
computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。原创 2024-03-01 21:49:26 · 410 阅读 · 0 评论 -
vue面试:MVVM、MVC、MVP的区别?
Controller 层是 View 层和 Model 层的纽带,它主要负责用户与应用的响应操作,当用户与页面产生交互的时候,Controller 中的事件触发器就开始工作了,通过调用 Model 层,来完成对 Model 的修改,然后 Model 层再去通知 View 层更新。页面的渲染、数据的获取,对用户事件的响应所有的应用逻辑都混合在一起,这样在开发简单项目时,可能看不出什么问题,如果项目变得复杂,那么整个文件就会变得冗长、混乱,这样对项目开发和后期的项目维护是非常不利的。原创 2024-03-01 21:28:43 · 3188 阅读 · 0 评论 -
使用 Object.defineProperty() 来进行数据劫持有什么缺点?
(1)在对一些属性进行操作时,使用这种方法无法拦截,比如通过下标方式修改数组数据或者给对象新增属性,这都不能触发组件的重新渲染,因为Object.defineProperty 不能拦截到这些操作。更精确的来说,对于数组而言,大部分操作都是拦截不到的,只是 Vue 内部通过重写函数的方式解决了这个问题。使用Proxy 的好处是它可以完美的监听到任何方式的数据改变,唯一的缺点是兼容性的问题,因为 Proxy 是 ES6 的语法。原创 2024-03-01 12:43:25 · 537 阅读 · 0 评论 -
Vue的基本原理?双向数据绑定的原理?
(3)Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。(2)compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。原创 2024-03-01 12:42:03 · 675 阅读 · 0 评论 -
Vue项目中如何解决跨域问题?
跨域本质是浏览器基于同源策略的一种安全手段同源策略:1.协议相同2.主机相同3.端口相同。原创 2024-02-20 10:46:51 · 405 阅读 · 0 评论 -
vue中组件和插件有什么区别?
把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在vue中每一个.vue文件都可以视为一个组件。2.添加全局资源,如指令、过滤器、过渡等:如vue-touch(用于在移动设备上处理触摸事件的库)1.降低整个系统的耦合度,组件可复用,在保持接口不变的情况下,我们可以替换不同组件快速完成需求。4.一个库,提供自己的API,同时提供上面提到的一个或多个功能,如vue-router。用来构成你的App业务模块,它的目标是App.vue。用来增强你的技术栈的功能模块,它的目标是Vue本身。原创 2024-02-20 10:16:36 · 632 阅读 · 0 评论 -
vue2面试题:vue组件之间的通信方式有哪些?
1.适用场景:子组件传递数据给父组件2.子组件通过$emit触发自定义事件,$emit第二个参数为传递的值3.父组件绑定监听器获取到子组件传过来的参数。原创 2024-01-24 21:16:52 · 1294 阅读 · 4 评论 -
vue2面试题:什么是双向数据绑定
把Model绑定到View上为单向绑定,双向绑定就是在单向绑定的基础上,用户更新了view后model也会随之更新。原创 2024-01-23 14:42:07 · 677 阅读 · 2 评论 -
vue2面试题:对vue生命周期的理解
1.created是在组件实例一旦创建完成的时候立刻调用,此时页面dom节点并未生成,mounted是在页面dom节点渲染完毕后执行的,created比mounted先。2.如果请求放在mounted中可能会导致页面闪动,因为此时页面dom结构已经生成,如果在页面加载前完成请求就不会出现这个情况,所以建议请求放在created中。vm.el完成DOM的挂载与渲染,此刻打印vm.$el,发现之前的挂载点及内容已被替换成新的DOM。vm.el挂载完毕,vm.$el生成的DOM替换了el选项对应的DOM。原创 2024-01-22 15:50:42 · 1108 阅读 · 0 评论