前端面试---Vue部分考点梳理

简介: 前端面试---Vue部分考点梳理

一. Vue的使用


1. Vue的基本使用

  1. 指令 插值
  • 插值 表达式
  • 指令 动态属性
  • v-html 会有XSS风险 会覆盖子组件
  1. computed 和 watch
  • computed 有缓存 data不变则不会重新计算
  • watch 如何深度监听
  • watch 监听引用类型时 拿不到oldVal
  1. v-for
  • v-for 和 v-if 不能同时使用
  • :key的值尽量不要使用index或者random
  1. 事件
  • 事件修饰符
  • 按键修饰符
  • 事件被绑定到了哪里:事件会挂载到当前绑定的元素上


2. Vue组件的使用

  1. props

父组件向子组件传递数据

  1. $emit

子组件触发父组件的事件并且传递参数

  1. 组件间的通讯 - 自定义事件

在绑定自定义事件中 第二个参数 是一个方法名称 在beforeDsstoy函数中 需要将方法及时销毁 否则会造成内存泄露

  1. 组件的生命周期
  • 挂载阶段 beforCreate created beforMount mounted
  • 更新阶段 beforUpdate updated
  • 销毁阶段 beforDestroy destroyed


3. Vue的高级特性

  1. 自定义v-model

颜色选择器

  1. $nextTick

Vue 是异步渲染

data 改变之后 DOM不会立刻渲染

$nextTick 会在DOM渲染之后触发 以获取最新DOM节点

  1. slot(插槽)

粗暴的理解成 父组件想要向子组件中插入写东西

  1. 基本使用
  2. 作用域插槽
  3. 具名插槽
  1. 动态、异步组件

动态组件:

  • :is=“component-name”用法

异步组件:

  • import()函数
  • 按需要加载 异步加载大组件
  1. keep-alive

缓存组件

频繁切换但不需要渲染 (tab选项卡)

Vue常见性能优化之一

  1. mixin

多个组件有相同的逻辑 抽离出来

mixin中可能遇到的问题

  • 变量来源不明确 不利于阅读
  • 多mixin可能会曹成命名冲突
  • mixin组件可能会出现多对多的关系 复杂度较高


4. Vuex的使用

  • state的数据结构设计
  • getters
  • action
  • mutation
  • 用于Vue组件
  • dispatch
  • commit
  • mapState
  • mapGetters
  • mapActions
  • mapMutations


5. Vue-router

  1. 路由模式
  • hash
  • H5 history
  1. 路由配置
  • 动态路由
  • 懒加载


二. Vue的原理(大厂必考)

1. 组件化 和 MVVM

  1. 数据驱动试图
  • 传统组件 只是静态渲染 更新还要依赖于操作DOM
  • 数据驱动试图 - Vue MVVM
  • 数据驱动试图 - React setState
  1. MVVM


2. 响应式 原理(重点)

  1. 组件data的数据一旦变化 立刻触发视图的更新
  2. 实现数据驱动试图的第一步
  3. 核心:API-Object.defineProperty

缺点:

  • 深度监听 需要递归到底 一次性计算量大
  • 无法监听新增属性和删除属性(Vue.set Vue.delete)
  • 无法原生监听数组 需要特殊处理

Vue3.0启用proxy 实现响应式 的缺点:

  • proxy的兼容性不好 且无法polyfill


3. vdom和diff

  1. vdon是实现Vue和React的重要基石
  2. diff算法是vdom中最核心 最关键的部分


4. 模板编译


5. 渲染过程


6. 前端路由


三. Vue经典面试题

1. v-show 和 v-if 的区别

v-show:通过css样式来控制 就是两个或多个元素中 让其显示的就直接显示 如果让其隐藏的就为其添加display:none
v-if:通过Vue本身的机制控制 就是两个或多个元素中 让其显示的就显示 其他的就不会被加载到浏览器中
以上两者的使用场景:判断是否为频繁切换 元素的显示 如果需要频繁的切换建议使用v-show 如果是一次性的建议使用v-if


2. 为何 v-for 中要用 key

v-for中必须要有key 并且他不能使用index要取和业务相关的值


3. 描述 Vue 中的生命周期(有父子组件的情况)

单组件的生命周期

有父子组件的情况
初始化Vue实例是从外到内 渲染是从内到外的:父组件初始化(created)---- 子组件初始化(created)---- 子组件渲染(mounted)----父组件渲染(mounted)
更新数据逻辑同上


4. Vue 组件如何通讯

父子通讯 :props和$emit
无关系组件之间通讯:自定义事件
Vuex通讯


5. 描述组件渲染和更新的过程


6. 双向数据绑定 v-model 的实现原理


7. created 和 mounted 的区别

created:把Vue的实例进行初始化 并没有开始渲染
mounted:是组件真正的网页绘制完成了(ajax获取信息 绑定事件等操作需要在这里完成)


8. 在 beforDestroy 中需要做什么?

解除绑定
销毁子组件 以及事件监听器
解除自定义事件的绑定



相关文章
|
2月前
|
Java 程序员
面试高频考点!关于构造方法的那些事儿
本文介绍了Java中的构造方法,包括其基本概念、默认构造方法、构造方法的重载、构造方法的细节以及执行顺序。通过具体示例,详细解释了构造方法在对象初始化中的重要作用,帮助读者在面试中更好地应对相关问题。
34 1
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
2月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
69 1
|
3月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
3月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
180 4
|
3月前
|
Java 程序员
Java 面试高频考点:static 和 final 深度剖析
本文介绍了 Java 中的 `static` 和 `final` 关键字。`static` 修饰的属性和方法属于类而非对象,所有实例共享;`final` 用于变量、方法和类,确保其不可修改或继承。两者结合可用于定义常量。文章通过具体示例详细解析了它们的用法和应用场景。
43 3
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
3月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
157 0

热门文章

最新文章