前端面试基础面试题——3

1.组件的设计原则

[2. 请问 v-if 和 v-show 有什么区别](#2. 请问 v-if 和 v-show 有什么区别)

[3.vue 事件中如何使用 event 对象?](#3.vue 事件中如何使用 event 对象?)

[4.v-for 与 v-if 的优先级](#4.v-for 与 v-if 的优先级)

[5.vue 中子组件调用父组件的方法](#5.vue 中子组件调用父组件的方法)

[6.vue 等单页面应用及其优缺点](#6.vue 等单页面应用及其优缺点)

[7.什么是 vue 的计算属性?](#7.什么是 vue 的计算属性?)

8.route和router的区别

[9. 响应式系统的基本原理](#9. 响应式系统的基本原理)

[10. vue slot是做什么的?](#10. vue slot是做什么的?)


1.组件的设计原则
复制代码
(1)页面上每个独立的可视/可交互区域视为一个组件(比如页面的头部,尾部,可复用的区块)
(2)每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护(组件的就近维护思想体现了前端的工程化思想,为前端开发提供了很好的分治策略,在vue.js中,通过.vue文件将组件依赖的模板,js,样式写在一个文件中)
(每个开发者清楚开发维护的功能单元,它的代码必然存在在对应的组件目录中,在该目录下,可以找到功能单元所有的内部逻辑)
(3)页面不过是组件的容器,组件可以嵌套自由组合成完整的页面
2. 请问 v-if 和 v-show 有什么区别

v-show 指令是通过修改元素的 display 的 CSS 属性让其显示或者隐藏

v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果

3.vue 事件中如何使用 event 对象?

v-on 指令(可以简写为 @)

1、使用不带圆括号的形式,event 对象将被自动当做实参传入;

2、使用带圆括号的形式,我们需要使用 $event 变量显式传入 event 对象。

4.v-for 与 v-if 的优先级

1、v-for优先于v-if被解析; 2、如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能; 3、要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环; 4、如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项;

5.vue 中子组件调用父组件的方法

第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法

第二种方法是在子组件里用$emit 向父组件触发一个事件,父组件监听这个事件就行了

第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

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

优点: 1、用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染。 2、前后端职责业分离(前端负责view,后端负责model),架构清晰 3、减轻服务器的压力

缺点: 1、SEO(搜索引擎优化)难度高 2、初次加载页面更耗时 3、前进、后退、地址栏等,需要程序进行管理,所以会大大提高页面的复杂性和逻辑的难度

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

先来看一下计算属性的定义: 当其依赖的属性的值发生变化的时,计算属性会重新计算。反之则使用缓存中的属性值。 计算属性和vue中的其它数据一样,都是响应式的,只不过它必须依赖某一个数据实现,并且只有它依赖的数据的值改变了,它才会更新。

8.route和router的区别

$route 是路由信息对象,包括path,params,hash,query,fullPath,matched,name 等路由信息参数。

而 $router 是路由实例对象,包括了路由的跳转方法,钩子函数等

9. 响应式系统的基本原理

vue响应式的原理,首先对象传入vue实例作为data对象时,首先被vue遍历所有属性,调用Object.defineProperty设置为getter和setter,每个组件都有一个watcher对象,在组件渲染的过程中,把相关的数据都注册成依赖,当数据发生setter变化时,会通知watcehr,从而更新相关联的组件

10. vue slot是做什么的?

插槽、主要是让组件的可扩展性更强,简单点说就是,能够在组件内写其他内容

相关推荐
阿蒙Amon7 分钟前
C#每日面试题-值传递和引用传递的区别
java·面试·c#
aloha_7898 分钟前
乐信面试准备
java·spring boot·python·面试·职场和发展·maven
短剑重铸之日22 分钟前
《RocketMQ研读》面试篇
java·后端·面试·职场和发展·rocketmq
努力学算法的蒟蒻1 小时前
day64(1.23)——leetcode面试经典150
面试·职场和发展
Anastasiozzzz1 小时前
力扣hot100 20.有效的括号 解析
java·算法·面试·力扣
时艰.2 小时前
RocketMQ 面试核心知识点总结
面试·rocketmq
问道飞鱼2 小时前
【大模型学习】大模型应用开发工程师面试核心8问
大数据·学习·面试
Sanyhem4 小时前
2025 年高频考点与深度追问点
java·面试
Mixtral8 小时前
2026年春招复盘记录工具测评:告别手动整理,AI自动生成求职总结
人工智能·面试·职场和发展·语音转文字·ai语音转文字
yanyu-yaya13 小时前
前端面试题
前端·面试·前端框架