前端面试Vue篇
文章平均质量分 50
本专栏专注于前端面试中经常出现的Vue面试题及知识点
叫我阿东就行
前端的那块砖
展开
-
Vue3对比Vue2做了哪些优化
(2)相对于Vue2的源码组织方式,menorepo把这些模块拆分到不同的package中,每个package有各自的API、类型定义和测试,使得模块拆分更细化,职责划分更明确,模块之间的依赖关系也更加明确,开发人员更容易阅读、理解和更改所有模块源码,提高代码的可维护性。数据是响应式的,必须劫持数据的访问和更新,使用了Proxy对数据进行劫持,Proxy不能监听到内部深层次的对象变化,因此Vue3的处理方式是在getter中去递归响应式,这样的好处是。,每个区块只需要以一个数组来追踪自身包含的动态结点。原创 2024-05-24 11:14:37 · 268 阅读 · 0 评论 -
35.Vue中key的作用
使用index 作为 key和没写基本上没区别,因为不管数组的顺序怎么颠倒,index 都是 0, 1, 2...这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作。key 是为 Vue 中 vnode 的唯一标记,通过这个 key,diff 操作可以更准确、更快速。为什么不建议用index作为key?原创 2024-03-12 19:15:01 · 376 阅读 · 0 评论 -
34.Vue diff算法的原理
在diff算法中,只对同层的子节点进行比较,放弃跨级的节点比较,。原创 2024-03-11 21:37:26 · 996 阅读 · 0 评论 -
33.params和query的区别
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是。:query更加类似于ajax中get传参,params则类似于post,说的再简单一点,原创 2024-03-11 20:40:20 · 324 阅读 · 0 评论 -
32. Vue-router跳转和location.href有什么区别
【代码】32. Vue-router跳转和location.href有什么区别。原创 2024-03-11 20:39:43 · 395 阅读 · 0 评论 -
31.Vue 路由钩子
有的时候,需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。,或者vue-router全局有三个路由钩子;具体使用beforeEach(判断是否登录了,没登录就跳转到登录页)afterEach(跳转之后,滚动条回滚到顶部)原创 2024-03-11 20:36:43 · 345 阅读 · 0 评论 -
30.如何定义动态路由?如何获取传过来的动态参数?
2.路由跳转3.参数获取参数获取 通过获取传递的值。原创 2024-03-11 20:22:34 · 390 阅读 · 0 评论 -
29.$route 和$router 的区别
$route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数 $router 是“路由实例”对象包括了路由的跳转方法,钩子函数等。原创 2024-03-11 20:16:22 · 323 阅读 · 0 评论 -
28.Vue如何获取页面的hash变化
window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。原创 2024-03-11 20:15:27 · 365 阅读 · 0 评论 -
27.路由的两种模式对比
Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式简介: hash模式是开发中默认的模式,它的URL带着一个#,例如:http://www.abc.com/#/vue,它的hash值就是。特点:hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端完全没有影响。所以改变hash值,不会重新加载页面。这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。原理: hash模式的主要原原创 2024-03-11 20:13:32 · 871 阅读 · 0 评论 -
26.Vue路由懒加载实现方式
使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。原创 2024-03-11 20:02:50 · 345 阅读 · 0 评论 -
25.对SPA的理解
SPA( single-page application )仅在一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。原创 2024-03-11 19:56:11 · 378 阅读 · 0 评论 -
24.Vue的性能优化
1.编译阶段尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher v-if和v-for不能连用 如果需要使用v-for给每项元素绑定事件时使用事件代理 SPA 页面采用keep-alive缓存组件 在更多的情况下,使用v-if替代v-show key保证唯一 使用路由懒加载、异步组件 防抖、节流 第三方模块按需导入 长列表滚动到可视区域动态加载 图片懒加载2.SEO优化预渲染 服务端渲染SSR3.打包优化压缩代原创 2024-03-11 19:53:11 · 383 阅读 · 0 评论 -
23.Vue如何收集依赖
Dep 是一个 class ,其中有一个关 键的静态属性 static,它指向了一个全局唯一 Watcher,保证了同一时间全局只有一个 watcher 被计算,另一个属性 subs 则是一个 Watcher 的数组,所以 Dep 实际上就是对 Watcher 的管理,再看看 Watcher 的相关代码∶。在初始化 Vue 的每个组件时,会对组件的 data 进行初始化,就会将由普通对象变成响应式对象,在这个过程中便会进行依赖收集的相关逻辑,如下所示∶。以上只保留了关键代码,主要就是。原创 2024-03-11 19:48:43 · 352 阅读 · 0 评论 -
22.Vue封装的数组方法,实现页面更新
在Vue中,对响应式处理利用的是Object.defineProperty对数据进行拦截,而这个方法并不能监听到数组内部变化,数组长度变化,数组的截取变化等,所以需要对这些操作进行封装,让Vue能监听到其中的变化。原创 2024-03-11 19:29:29 · 338 阅读 · 0 评论 -
21.Vue 保存页面的当前状态
比如从 B 组件跳转到 A 组件的时候,A 组件需要更新自身的状态。但是如果从别的组件跳转到 B 组件的时候,实际上是希望 B 组件重新渲染的,也就是不要从 Storage 中读取信息。所以需要在 Storage 中的状态加入一个 flag 属性,用来控制 A 组件是否读取 Storage 中的状态。在这里需要用到 state 参数,在 B 组件中通过 history.location.state 就可以拿到 state 值,保存它。要切换的组件作为子组件全屏渲染,父组件中正常储存页面状态。原创 2024-03-11 10:17:37 · 342 阅读 · 0 评论 -
20. Computed和Watch的区别
computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。原创 2024-03-11 10:06:33 · 347 阅读 · 0 评论 -
19.MVC、MVVM、MVP的区别
MVC、MVVM、MVP是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。在开发单页面应用时,往往一个路由页面对应了一个脚本文件,所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取、对用户事件的响应都混在一起,若项目庞大复杂,则整个文件就会变得冗长,混乱,对项目开发和后期维护非常不利。原创 2024-03-10 10:33:40 · 432 阅读 · 0 评论 -
18.Vue的基本原理
当一个Vue实例创建时,Vue会遍历data中的属性,用 Object.defineProperty(vue3.0使用proxy )将它们转为 getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件更新。原创 2024-03-10 10:10:12 · 341 阅读 · 0 评论 -
17.Vue 对keep-alive的理解
keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOMkeep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们keep-alive可以设置以下props属性- 字符串或者正则表达式。只有名称匹配的组件会被缓存- 字符串或者正则表达式。名称匹配的组件不会被缓存- 数字类型。最多可以缓存多少组件实例。原创 2024-03-09 22:05:09 · 330 阅读 · 0 评论 -
16.Vue 权限管理
权限是对特定资源的访问许可,权限控制就是确保用户只能访问到被分配的资源,而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发1.页面加载触发(路由)2.页面上的按钮点击触发(视图)原创 2024-03-08 21:27:28 · 1696 阅读 · 0 评论 -
15.Vue 对虚拟DOM的理解
虚拟DOM只是一层对真实DOM的抽象,以JavaScript对象(VNode结点)作为基础的树,用对象的属性来描述节点,最终通过一系列的操作使这棵树映射到真实环境上虚拟DOM表现为一个Object对象。对象至少包括标签名(tag)、属性(attrs)和子元素对象(children)三个属性。原创 2024-03-08 15:47:58 · 408 阅读 · 0 评论 -
14.Vue 插槽
1.默认插槽2.具名插槽3.作用域插槽。原创 2024-03-08 15:36:49 · 349 阅读 · 0 评论 -
13.Vue 自定义指令
在vue中提供了一套为数据驱动视图更为方便的操作,这些操作被称为指令系统我们看到的v-开头的行内属性,都是指令例如v-show,v-if,Vue允许注册自定义指令指令的几种使用方式。原创 2024-03-03 19:01:04 · 370 阅读 · 0 评论 -
12.Vue 项目中如何解决跨域问题
cors方案本篇文章不做过多的介绍,主要是在服务端进行配置,设置HTTP头,Access-Control-Allow-Origin响应头。原创 2024-03-03 18:23:59 · 308 阅读 · 0 评论 -
11.Vue new 一个Vue实例的过程
定义_update $forceUpdate $destroy生命周期。定义$set $get $delete $watch等方法。定义$on $off $emit $off 等事件。_update将虚拟DOM生成真实DOM结构,渲染到页面。当我们new一个Vue实例时,会调用_init方法。挂载的时候主要通过mountComponent方法。定义updateComponent更新函数。执行render生成虚拟DOM。调用$mount进行页面挂载。原创 2024-03-03 17:13:09 · 305 阅读 · 0 评论 -
10.Vue 对nextTick的理解
官方定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新之后的DOM可以理解成,Vue更新DOM是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等待队列中所有数据变化完成之后,再统一进行更新。原创 2024-03-03 15:52:51 · 429 阅读 · 0 评论 -
9.Vue 常见的修饰符
1.表单修饰符2.事件修饰符3.v-bind修饰符4.鼠标按键修饰符5.键值修饰符。原创 2024-03-02 19:25:15 · 338 阅读 · 0 评论 -
8.Vue 对mixin的理解
该组件在使用mixin的时候,若mixin中有生命周期函数,则会先执行mixin中生命周期钩子,后执行组件的生命周期钩子。Mixin是面向对象程序设计中的类,提供了方法的实现,其他类可以访问mixin的方法而不必成为其子类。谨慎使用全局混入,它会影响每个单独创建的 Vue 实例 (包括第三方组件),避免重复应用混入。原创 2024-03-02 18:35:05 · 329 阅读 · 0 评论 -
7.Vue v-if和v-show的异同
都能够控制一个元素或者一个组件的消失与隐藏。原创 2024-03-02 14:31:22 · 371 阅读 · 0 评论 -
6.Vue v-if和v-for的优先级
上面这种写法会报错,This 'v-if' should be moved to the wrapper element vue/no-use-v-if-with-v-for。这样的写法就不会报错,会先进行v-if判断,再进行v-for循环。vue已经不允许v-if和v-for在同一元素上使用。v-for的优先级比v-if的优先级高。原创 2024-03-02 14:07:38 · 321 阅读 · 0 评论 -
5.Vue动态的给data添加一个新属性的问题
上面的代码我我们的预期结果是点击一下button按钮,就给item对象添加一个新的属性,可是在控制台上确实输出了新属性,但是页面却不发生更新!这是为什么呢?原创 2024-03-02 11:59:50 · 595 阅读 · 0 评论 -
4.Vue2 data为什么是一个函数而不是一个对象?
实例定义data可以是一个函数,也可以是一个对象组件定义data只能是一个函数,否则会报错。原创 2024-03-02 11:24:52 · 353 阅读 · 0 评论 -
3.Vue2组件间的通信方式
1.父子组件通信(props、$emit、ref、v-model、具名插槽、作用域插槽)2.兄弟组件通信($bus、$parent、消息订阅与发布)3.祖孙与后代之间的通信($attrs、$listener、provide、inject)4.非关系组件之间的通信(vuex)原创 2024-03-01 22:52:05 · 364 阅读 · 0 评论 -
2.Vue双向数据绑定的原理
简单来说就是数据的改变能够引起视图的改变,视图的改变同样也能引起数据的改变。原创 2024-02-27 22:33:36 · 318 阅读 · 0 评论 -
1.Vue生命周期
1.beforeCreate(创建前)2.create(创建时)3.beforeMount(挂载前)4.mounted(挂载时)5.beforeUpdate(更新前)6.updated(更新后)7.beforeDestroy(销毁前)8.destroyed(销毁后)9.actived(keep-alive缓存的组件被激活时)10.deactivated(keep-alive缓存的组件不被调用的时候)11.errorCapture(捕获一个来自子孙组件的错误时被调用)原创 2024-02-27 21:29:54 · 299 阅读 · 0 评论