2024面经难点

雾中人
204 阅读9分钟

# v-model之vue2与3的差别

官方定义：

主要用于进行表单项（input、textarea、select）的输入绑定，本质上只是一个语法糖，它负责监听用户的输入事件以更新数据。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

    • text 和 textarea 元素使用 value property 和 input 事件；

    • checkbox 和 radio 使用 checked property 和 change 事件；

    • select 字段将 value 作为 prop 并将 change 作为事件。

vue2中的v-model

1.v-model语法糖：

// 等价于

<input type="text" :value="title" @input="title= $event.target.value" />

2.自定义v-model属性：

官方定义: 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

菜鸡定义： 允许在组件中自定义事件与prop值

prop => value // 默认

event => input // 默认

废话不多说 感兴趣的小伙伴点下链接 codesandbox.io/s/elastic-i…

3. sync修饰符

为了方便理解vue3中的v-model 再次特意解释一下sync修饰符 。

官方定义: 我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

菜鸡定义: 和v-model基本一致 （滑稽）

代码能更好的诠释... codesandbox.io/s/vue2-sync…

Vue3中的v-model

变更内容

    • 用于自定义组件时,v-model prop与event 默认名称已更改;

prop => value => modelValue // 默认

event = input => update:modelValue // 默认

    • v-bind的.sync 修饰符和组件的model选项已含泪移除;

    • 新增 可在同一个组件上使用多个v-model;

    • 可自定义v-model指令。

1. v-model语法糖：

// 等价于
<input type="text" :modelValue="title" @update:modelValue="title= $event.target.value" />

代码: codesandbox.io/s/vue3-v-mo…

2.自定义v-model属性：

// 等价于
<input type="text" :msg="title" @update:msg="title= $event.target.value" />

代码: codesandbox.io/s/vue3-v-mo…

总结：

  • vue3 默prop与event为：modelValue和update:modelValue；vue2 中则是：value和input；
  • vue3 中直接通过 v-model 后面参数v-model:msg来指定属性名，并且支持绑定多个 v-model；而 vue2 中通过子组件的model 属性中的prop值和event值来指定属性名和事件名。

render函数参数

Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码：

return createElement('h1', this.blogTitle)
预览

createElement到底会返回什么呢？其实不是一个_实际的_ DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node) ”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

注： 当使用render函数描述虚拟 DOM 时，vue 提供一个函数，这个函数是就构建虚拟 DOM 所需要的工具。官网上给他起了个名字叫 createElement。还有约定的简写叫 h，将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。

createElement（TagName，Option，Content）接受三个参数
createElement(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])

自定义指令

juejin.cn/post/724917…

谈谈Webpack、Vite之间的区别

  1. Webpack：

    • Webpack 是一个模块打包器，主要用于 JavaScript 应用程序的打包和优化。
    • 它支持各种资源（如 JS、CSS、图片、字体等）的加载和处理。
    • Webpack 支持代码分割、懒加载、Tree Shaking 等优化策略，有助于提高应用程序的性能。
    • 通过插件系统，Webpack 可以进行高度定制，满足各种项目需求。
    • 缺点是配置相对复杂，构建速度在某些情况下较慢。

  2. Vite：

    • Vite 是一个基于 ES modules 的开发服务器和构建工具，由 Vue.js 作者尤雨溪创建。
    • Vite 利用原生 ES 模块（ESM）特性，实现快速开发服务器和按需编译。
    • Vite 支持 HMR（热模块替换），提高开发效率。
    • Vite 使用 Rollup 进行生产环境构建，具有出色的 Tree Shaking 能力。
    • Vite 配置相对简单，易于上手，但某些场景下可能没有 Webpack 那么灵活。

前端如何做性能监控？

前端性能监控是指收集、分析和报告前端性能数据的过程。在前端开发中，性能监控可以帮助我们了解用户在实际使用过程中的体验，发现和解决性能瓶颈。以下是一些前端性能监控的方法：

  1. 利用浏览器提供的性能API，例如Navigation Timing API、Resource Timing API、User Timing API等，收集页面加载、资源加载和自定义性能指标的数据。
  2. 使用PerformanceObserver API来监听性能数据的变化，实时收集性能指标。
  3. 监控页面的错误信息，包括JavaScript错误、资源加载失败等。可以使用window.onerror和window.addEventListener('error')进行捕获。
  4. 监控用户的交互事件，如点击、滚动、输入等，以了解用户在使用过程中可能遇到的性能问题。
  5. 使用Long Tasks API来检测可能导致页面卡顿的长时间任务，例如运行时间较长的JavaScript代码。
  6. 利用Web Vitals库来监控核心性能指标，如Largest Contentful Paint（LCP）、First Input Delay（FID）和Cumulative Layout Shift（CLS）等。
  7. 将收集到的性能数据发送到服务器端进行存储和分析。可以使用XMLHttpRequest或Fetch API进行数据上报。
  8. 使用开源或商业的应用性能监控（APM）工具，如Google Analytics、Sentry、New Relic等，进行性能数据的收集、分析和可视化展示。
  9. 对收集到的性能数据进行定期分析，找出性能瓶颈，优化前端代码和架构，提高用户体验。

性能监控是前端优化的重要环节，通过不断地监控、分析和优化，我们可以确保用户在使用过程中获得良好的体验

前端安全

谈一谈你对XSS攻击理解

跨站脚本攻击（XSS，Cross-site Scripting）是一种常见的网络安全漏洞，它允许攻击者将恶意代码注入到受害者访问的网站中。这种攻击通常通过JavaScript来实现，但也可能涉及到其他脚本语言。在XSS攻击中，攻击者的目标是利用用户对网站的信任，进而窃取用户的数据、破坏网站的功能或者进行其他恶意行为。

XSS攻击可以分为三种类型：

  1. 存储型XSS攻击（Stored XSS）：攻击者将恶意代码提交到目标网站的数据库中，当其他用户访问受影响的页面时，恶意代码将被加载并执行。这种类型的XSS攻击是最危险的，因为攻击者可以长期控制受害者的浏览器。
  2. 反射型XSS攻击（Reflected XSS）：攻击者通过创建一个包含恶意代码的URL，诱使受害者点击这个链接。当受害者访问这个URL时，恶意代码会在其浏览器中执行。这种类型的XSS攻击需要用户的互动，因此相对存储型XSS攻击来说，风险较低。
  3. DOM型XSS攻击（DOM-based XSS）：这种类型的XSS攻击是通过操作网页的Document Object Model（DOM）来实现的。攻击者会寻找可以用来插入恶意代码的DOM节点，当用户访问受影响的页面时，恶意代码将被执行。这种类型的攻击与反射型XSS相似，但更难以检测和防御。

为了防范XSS攻击，网站开发者和运维人员可以采取以下措施：

  1. 对用户输入进行过滤和验证：确保所有的用户输入都经过适当的验证和过滤，以防止恶意代码的注入。
  2. 使用安全的编码方法：对用户输入的数据进行编码，将特殊字符转换为HTML实体，以防止代码在浏览器中被解析和执行。
  3. 设置Content Security Policy（CSP）：使用CSP可以限制浏览器加载和执行外部资源，降低XSS攻击的风险。
  4. 使用HttpOnly Cookies：将敏感信息（如会话ID）存储在HttpOnly Cookies中，以防止恶意脚本通过浏览器窃取这些信息。
  5. 保持软件和库的更新：确保使用的开发工具、库和框架是最新的，并修复已知的安全漏洞。

谈一谈你对CSRF攻击理解

跨站请求伪造（CSRF，Cross-Site Request Forgery）是一种常见的网络安全漏洞，攻击者通过诱使受害者执行不知情的操作来利用受害者在网站上的身份。这种攻击是基于用户在其他网站上的登录状态和网站的信任机制。

在CSRF攻击中，攻击者创建一个恶意网站或发送一个包含恶意代码的电子邮件。当受害者访问恶意网站或查看电子邮件时，浏览器会在后台向目标网站发送伪造的请求。由于受害者已经在目标网站上登录，因此这些请求将带有有效的凭据（如cookies），使攻击者能够以受害者的身份执行操作。

为了防范CSRF攻击，网站开发者和运维人员可以采取以下措施：

  1. 使用CSRF令牌：在用户提交表单或执行敏感操作时，为每个请求生成一个随机的、唯一的CSRF令牌。将这个令牌与用户的会话关联，并在请求中包含该令牌。服务器端需要验证每个请求的令牌，确保它与用户会话的令牌匹配。这样可以防止攻击者伪造有效的请求。
  2. 验证请求来源：检查请求的来源，例如HTTP的Referer头或Origin头，确保请求来自于合法的域名。这有助于防止跨域的CSRF攻击。
  3. 使用SameSite Cookies属性：设置SameSite属性为“Strict”或“Lax”，可以防止浏览器在跨站请求时发送cookies。这可以降低CSRF攻击的风险，但可能不适用于所有场景。
  4. 要求用户重新验证身份：在执行敏感操作（如修改密码或执行交易）时，要求用户重新输入密码或进行二次验证。这可以降低CSRF攻击的成功率。
  5. 提高安全意识：教育用户识别和避免钓鱼网站、恶意邮件等，以降低CSRF攻击的成功率

Vue3中Watch、Watcheffect、Computed的使用和区别解析

watch 用于监听响应式数据的变化，并在数据变化时执行特定的回调函数。适合在响应式数据变化时执行异步操作或复杂逻辑。

特点

  • 指定数据监听：可以精确地监听一个或多个响应式数据。
  • 回调函数：数据变化时调用指定的回调函数，并传入新值和旧值。
  • 配置项：支持 immediate（是否立即执行回调）和 deep（是否深度监听）配置。

应用场景

  • 需要执行异步操作（如 API 请求）。
  • 需要执行复杂的副作用操作。
  • 需要监听深层次的对象变化。

watchEffect 用于自动运行一个副作用函数，并追踪其依赖。任何依赖变化时都会重新运行该函数。适合用来执行副作用，但不需要明确指定依赖。

特点

  • 自动依赖追踪：自动追踪副作用函数中的响应式数据依赖。
  • 立即执行：函数会立即执行一次，并在依赖变化时重新执行。
  • 简洁性：不需要手动指定依赖，代码更简洁。

应用场景

  • 需要自动运行副作用函数，并自动管理依赖。
  • 界面更新或 DOM 操作。
avatar
文章
阅读
粉丝