vue3面试题

锅包又
495 阅读12分钟

sass语言的特点？

1. 可以减少重复代码：Sass可以通过使用变量、混合、继承等方式来减少代码的重复性，提高代码的可维护性。
2. 支持嵌套：Sass支持CSS样式的嵌套，可以更方便地控制样式的层级关系。
3. 支持模块化：Sass支持模块化开发，可以将样式分成多个模块进行开发，提高代码的可读性和可维护性。
4. 支持函数和运算符：Sass支持函数和运算符，可以完成更复杂的样式计算。
5. 支持导入其他文件：Sass可以通过@import指令导入其他Sass文件，便于代码的组织和管理。
6. 支持扩展：Sass支持使用@if、@for和@while等指令来扩展CSS的功能，增强了CSS的表现力和灵活性。
7. 支持多平台：Sass可以在多个平台上使用，包括Windows、Mac、Linux等操作系统。

localStorage sessionStorage 有效时间：

localStorage 存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除

Pina和Vuex的区别

    Vuex 和 Pinia 都是 Vue.js 的状态管理库，Vue2使用的是Vuex，Vue3则推荐使用Pinia ，它们的目的是为了更好地管理 Vue 应用中的状态。下面是它们之间的一些区别：
    1. Vuex 是 Vue.js 官方提供的状态管理库，而 Pinia 是社区开发的状态管理库。
    2. Vuex 使用全局单例模式来管理状态，而 Pinia 则使用了 Vue.js 3.0 中的 Composition API。
    3. Vuex 中有五个核心概念：state、getters、mutations、actions 和 modules，而 Pinia 则只有一个核心概念：store。在 Pinia 中，所有的状态和操作都是通过 store 来管理的。
    4. Vuex 中的状态是响应式的，而 Pinia 中的状态则是通过响应式 API 实现的。这意味着在 Vuex 中可以直接修改状态，而在 Pinia 中必须使用 API 来修改状态。
    5. Vuex 中的模块划分比较灵活，可以嵌套多层，而 Pinia 中的模块划分则比较简单，只支持一层。
    -   vuex优点：

-   生态更成熟，使用过的业务场景更丰富
-   上手成本低

  • vuex优点：

    • 生态更成熟，使用过的业务场景更丰富
    • 上手成本低

  • pinia优点：

    • 体积更小
    • 不再有mutation，都用actions去实现
    • 支持多实例，不再需要modules去管理
    • 更好的支持ts
    • composition api维护更方便

diff 算法的比较策略

Vue 2 采用传统的“同层比较”算法，这种策略在处理大量节点或者深度嵌套时可能不够高效。
Vue 3 采用了双端比较的策略，这种策略可以从头到尾快速定位出第一个不同的节点，从而减少比较的总次数。

ref reactive

数据类型不同
访问方式不同
更新触发方式不同
    ref通过Object.defineProperty()的get和set来实现响应式， reactive通过Proxy来实现响应式，并通过Reflect操作源对象内部的数据

跨域问题如何解决

使用Vue CLI提供的配置proxy代理功能、Nginx反向代理

Vite和Webpack的区别

1. 构建速度
    Vite 的构建速度比 Webpack 快得多，因为 Vite 使用了原生 ES 模块的特性，可以在开发阶段实现按需编译，只编译改动的模块，而不需要对整个项目进行打包。而 Webpack 需要在每次打包时重新编译所有模块，因此构建速度相对较慢。
     2. 开发体验
    Vite 可以提供更好的开发体验，因为它支持模块热更新和快速的构建速度。模块热更新可以在开发时快速查看修改后的效果，而不需要刷新页面。同时，Vite 还可以在开发时提供开发服务器，支持自动刷新、错误提示等功能。而 Webpack 的开发体验相对较差，需要手动刷新页面查看修改后的效果。
     3. 配置复杂度
     Webpack 的配置相对较为复杂，需要开发者进行详细的配置，包括入口、输出、loader、插件等。而 Vite 的配置相对简单，使用了一些默认配置，如自动识别入口文件、自动配置端口号等。同时，Vite 还提供了一些预设的插件，可以帮助开发者更加方便地进行样式处理等
     4. 生态系统
     Webpack 有一个庞大的生态系统，可以满足更多的需求。Webpack 支持多种编程语言和框架，如 Vue、React、TypeScript 等。而 Vite 的生态系统相对较小，目前主要支持 Vue 和 React 等框架。
     
    总之，Vite 和 Webpack 在构建速度、开发体验、配置复杂度和生态系统等方面有一些差异。开发者可以根据项目的具体需求选择合适的构建工具。如果需要快速的开发体验和构建速度，可以选择 Vite；如果需要更为完善的生态系统和更灵活的配置，可以选择 Webpack。

shallowRef

ref() 的浅层作用形式。

vue2和vue3的区别

1. 更快的速度和更小的体积
    Vue.js 3 的速度比 Vue.js 2 更快，并且它的体积更小。Vue.js 3 通过使用 Proxy 代替 Object.defineProperty 实现数据的响应式更新，同时也使用了静态提升和 Tree-Shaking 等技术来减小打包体积。
2. 更好的 TypeScript 支持
    Vue.js 3 对 TypeScript 的支持更加完善，可以提供更好的类型检查和提示。Vue.js 3 中的 API 也是使用 TypeScript 编写的，这使得开发者能够更加方便地进行开发和维护。
3. 更加灵活的组合式 API
    Vue.js 3 引入了组合式 API，将原本的选项式 API 和 Mixin 等组合方式进行了统一。组合式 API 可以让开发者更加灵活地组合和重用逻辑，并且也可以更好地支持 TypeScript。
 4. 更好的性能追踪和调试工具
     Vue.js 3 提供了更好的性能追踪和调试工具，可以帮助开发者更好地了解应用程序的性能瓶颈，从而进行优化和调试。
 5. 更好的适配性
     Vue.js 3 对 Web 平台和 Native 平台进行了更好的适配，可以更加方便地进行跨平台开发。同时，Vue.js 3 也提供了更好的 SSR（服务器端渲染）支持，可以让开发者更加方便地进行 SSR 开发。
  总之，Vue.js 3 相比于 Vue.js 2 有一些重要的变化和改进，包括更快的速度和更小的体积、更好的 TypeScript 支持、更加灵活的组合式 API、更好的性能追踪和调试工具以及更好的适配性等。开发者可以根据具体的项目需求和开发经验选择合适的版本。

MVVM的理解

MVVM是一种软件架构模式，MVVM 分为 Model、View、ViewModel：

  • Model代表数据模型，数据和业务逻辑都在Model层中定义；
  • View代表UI视图，负责数据的展示；
  • ViewModel负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

子组件如何改变父组件的数据

组件化开发过程中有个`单项数据流原则`，不在子组件中修改父组件是个常识问题。

计算属性和watch以及methods的区别 和 运用的场景

computed 是一个计算属性，根据依赖的数据动态计算而来，只有在依赖的数据发生变化时才会重新计算；而 watch 是一个观察者，用于监听数据的变化，并在数据变化时执行相应的操作。

watch和watchEffect的区别？

watch针对具体的数据进行监视,而watchEffect是针对响应式函数及其中使用到的响应式数据进行监视;因此watch更加精细化,watchEffect更加灵活

怎样理解 Vue 的单向数据流？

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

Vue 组件间通信有哪几种方式？

1、`props / $emit` 适用 父子组件通信
2、'ref` 与 `$parent / $children` 适用 父子组件通信
3、`EventBus （$emit / $on）` 适用于 父子、隔代、兄弟组件通信
4、`$attrs`/`$listeners` 适用于 隔代组件通信
5、`provide / inject` 适用于 隔代组件通信
6、Vuex 适用于 父子、隔代、兄弟组件通信

选择器优先级

 `!important` > 行内样式 > `#id` > `.class` > `tag` > * > 继承 > 默认

说一下vue是如何实现数据响应的（MVVM的实现）

  • vue使用observer来劫持每个对象的属性，其原理，vue2使用的是Object.defineProptory，而vue3使用的是Proxy

  • 使用Dep通过dep.depend()来收集依赖，在initData、initProps、以及watch、computed时候来收集render函数依赖的属性和数据（get阶段），在数据set阶段dep发现发生变化，调用dep,notify()来通知render函数渲染，以及watch回调

  • 通过scheduler实现高效调用，实质就是将修改放在一个微任务里面去执行，实际上就是nextTick，所以我们在vue中一般为了确保dom更新完成会调用nextTick来实现

对nextTick的理解

nextTick可以传入一个回调函数，该回调回调函数会被放入到vue运行时的微队列的中去，等到dom执行完成之后调用nextTick，nextTick实现优先使用MutationObserver，如果不支持MutationObserver则使用setImmediate（主要在IE10支持），如果不支持，则使用setTimeout

插槽

  1. 默认插槽：

无需name属性，取子组件肚子里第一个元素节点作为默认插槽。

  1. 具名插槽：

在多个插槽的情况下使用，利用name标识插槽。

  1. 作用域插槽：

子组件给父组件传递数据。

setup语法糖 （script setup语法）

cript setup是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 script 语法更加简洁 要使用这个语法，需要将 setup attribute 添加到 <script> 

 TypeScript 与 JavaScript 的区别

image.png

TypeScript的类型

 Boolean 、Number 、String 、Symbol

any、unknown 、never

any

在 TypeScript 中，任何类型都可以被归为 any 类型。这让any类型成为了类型系统的顶级类型（也被称作全局超级类型）。但是不建议使用 any，不然就丧失了 TS 提供的保护机制，失去了使用TS的意义。

unknown

所有类型也都可以赋值给 unknown。这使得 unknown 成为 TypeScript 类型系统的另一种顶级类型（另一种是 any）。它的定义和 any 定义很像，但是它是一个安全类型，使用 unknown 做任何事情都是不合法的。

never

never类型表示的是那些永不存在的值的类型。

vue 中修饰符

  • 事件修饰符
  • 按键修饰符
  • 表单修饰符

Vue中的Key的作用是什么

key 的作用主要是为了高效的更新虚拟 DOM

Vue3中的指令有哪些？

Vue3中的指令包括v-if、v-for、v-bind、v-on、v-html、v-model、v-show、v-slot、v-text等

Vue3如何实现异步组件加载

defineAsyncComponent 和 import()

Vue3如何实现自定义渲染函数

Vue3使用 `h()` 函数来创建虚拟节点，例如 `h('div', {class: 'container'}, 'Hello, world')` 。

 Vue3中的setup()函数有什么用途？

Vue3中的setup()函数是用来替代Vue2中的data、methods和computed等选项的。它可以用来创建响应式数据和添加需要在模板中使用的方法。

setup()函数有什么优点？

更好的逻辑复用、更灵活的代码组织、 更好的类型推导、 更小的生产包体积

可以在同一个组件中使用两种 API 吗

package.json 如何引用私有的本地包

微服务相关 qiankun

单向数据流的优缺点

HTML代码第一行的作用

HTML 代码的第一行用于声明文档的类型，并且告诉浏览器使用哪种 HTML 的标准来解析页面

SSE (Server-Sent Events) 和 WebSocket 都是用于实现实时通信的技术，它们的区别

  • 通信方向：
    • SSE：单向通信（服务器到客户端);
    • WebSocket：双向通信（服务器到客户端，客户端到服务器）;
  • 协议：
    • SSE：使用 [HTTP 协议]
    • WebSocket：使用 WebSocket 协议（初始握手通过 HTTP 升级）
  • 连接：
    • SSE：使用标准 HTTP 连接，保持长连接
    • WebSocket：建立专用的 WebSocket 连接
  • 适用场景:
    • SSE：适用于通知、实时新闻、股票行情等单向数据流
    • WebSocket：适用于聊天应用、多人游戏等需要频繁双向通信的场景

 vue3 如何实现动态组件？

  • 内置特殊元素 “元组件” <component>

Vue 项目中如何实现多环境配置？

  • 可以使用 .env 文件来为不同环境配置变量。常见的环境文件包括：
  • env：默认的环境配置（用于开发环境或没有明确环境时）。
  • .env.development：开发环境配置。
  • .env.production：生产环境配置。
  • .env.test：测试环境配置。

 Vue 性能优化方式？

  • 组件懒加载
  • 组件内缓存和 keep-alive
  • 合理使用 computed 和 watch 减少不必要的渲染和计算
  • 使用 v-memo 来缓存渲染结果
  • 事件防抖与节流
  • 压缩与优化资源

什么是 CSS 中的 v-bind 函数？

  • 在 <style> 中直接绑定 JS 中的响应式变量。
avatar
文章
阅读
粉丝