自学内容网 自学内容网
自学内容网 > 正文

Vue.js面试题

🕗 发布于 2024-12-08 20:34 vue.js  flutter  前端  

0. Vue.js 做了些什么？

Vue.js 作为现代前端框架，提供了一系列功能和工具，帮助开发者更高效地开发 Web 应用。它不仅是一个简单的 UI 渲染库，还涵盖了很多与开发效率、应用结构、性能优化相关的内容。Vue 的核心特性包括：

0.1 声明式渲染
  • Vue 提供了数据绑定和模板语法，允许开发者通过声明式的方式来更新 UI。只需要声明 UI 的结构和需要显示的数据，Vue 会自动更新 DOM，不需要手动操作 DOM 元素。
  • 与 普通的 HTML + JavaScript 对比，后者通常需要直接操作 DOM 来更新页面，比如通过 document.getElementById() 来获取元素并修改内容。
0.2 组件化开发
  • Vue.js 使用组件化思想，界面可以拆分成多个独立的组件，每个组件都有自己的模板、样式和逻辑，这样可以提高代码的复用性、可维护性和可读性。
  • 普通的三件套（HTML、CSS、JavaScript）通常需要开发者自己组织代码结构，较难管理大规模的代码。Vue.js 的组件化使得大型项目的开发更加模块化。
0.3 响应式数据绑定
  • Vue.js 的核心特性之一就是其 响应式数据系统。当数据发生变化时，Vue 会自动更新 DOM，不需要开发者手动更新页面。Vue 使用了 依赖追踪 和 虚拟 DOM 来优化性能，确保只更新必要的部分。
  • 在传统的 HTML + JavaScript 中，需要通过手动操作 DOM（例如 document.getElementById().innerHTML）来更新页面，较为繁琐且容易出错。
0.4 指令系统
  • Vue 提供了许多内置的指令（如 v-bind、v-if、v-for、v-model 等）来简化常见的操作。
    • 例如，v-bind 用来动态绑定元素的属性，v-if 控制元素是否渲染，v-for 用于渲染列表等。
  • 普通的 HTML 和 JavaScript 需要通过原生的 DOM API 来实现类似的功能，代码更为复杂且重复性高。
0.5 Vue Router 和 Vuex
  • Vue Router：用于实现前端路由，可以在不同的组件之间进行跳转，支持单页面应用（SPA）的路由管理。
  • Vuex：Vue.js 的状态管理库，用于集中式管理应用的所有状态，避免了传统应用中多处共享状态的混乱。
  • 传统的 HTML + JavaScript 通常需要依赖外部库（如 React Router 或 Vuex），并且要自己管理状态和路由。
0.6 生命周期钩子
  • Vue 提供了丰富的生命周期钩子，允许开发者在组件创建、更新、销毁等不同阶段插入自己的逻辑。
  • 在传统的 HTML + JavaScript 中，开发者通常需要手动处理元素的生命周期（如页面加载、事件绑定和清除等），而 Vue.js 自动处理了大部分生命周期的管理。
0.7 内置动画和过渡效果
  • Vue.js 允许开发者轻松地为元素和组件添加过渡动画，内置支持 CSS 动画和 JavaScript 动画。
  • 传统的 HTML + CSS 和 JavaScript 需要手动实现动画效果，并且很难在 DOM 操作中优雅地处理动画。

1. Vue.js的生命周期函数及其执行顺序

Vue.js的生命周期函数是在Vue实例的不同阶段自动调用的函数，主要分为三个阶段：初始化、更新和销毁。执行顺序如下：

  • 创建阶段：

    1. beforeCreate：实例刚创建，数据和事件都未初始化。
    2. created：实例创建完成，数据已初始化，但DOM还未渲染。

  • 挂载阶段： 3. beforeMount：DOM挂载前，模板已渲染为虚拟DOM。 4. mounted：DOM挂载完成，所有的DOM和子组件已渲染。

  • 更新阶段： 5. beforeUpdate：数据更新时，虚拟DOM更新前。 6. updated：数据更新后，DOM更新完成。

  • 销毁阶段： 7. beforeDestroy：实例销毁前，组件相关的事件和观察者会被移除。 8. destroyed：实例销毁后，所有的数据和事件都被销毁。

生命周期函数汇总表

生命周期钩子阶段什么时候调用做什么
beforeCreate创建阶段实例创建后，数据和事件尚未初始化不常用，无法访问 data 和 methods，用于初始化之前的操作
created创建阶段实例创建完成，数据和方法已初始化，但模板未渲染初始化数据，发起请求，设置数据等
beforeMount挂载阶段DOM 挂载前，虚拟 DOM 已经创建但未挂载用于执行一些准备工作，通常不常用
mounted挂载阶段DOM 挂载完成，渲染后的 DOM 已经可用进行 DOM 操作、启动定时器、调用外部 API 等
beforeUpdate更新阶段数据变化时，虚拟 DOM 更新前监控数据变化，优化性能或记录日志等
updated更新阶段数据更新后，DOM 更新完成在数据变化后更新 DOM，更新图表、调整布局等
beforeDestroy销毁阶段实例销毁前，数据和事件仍然有效清理定时器、解绑事件、清理外部资源等
destroyed销毁阶段实例销毁后，数据和事件已销毁执行彻底的清理工作，解除所有绑定和资源

典型用途总结：

  • 创建阶段：用来进行数据初始化、请求数据等操作。
  • 挂载阶段：用来进行 DOM 操作、初始化第三方库、设置事件监听等。
  • 更新阶段：用来处理数据变化后的视图更新操作、性能优化等。
  • 销毁阶段：用来清理定时器、事件监听器等，释放资源，避免内存泄漏。

2. Vue.js中的v-bind指令和v-model指令有什么区别？

  • v-bind：动态绑定属性或特性，将数据绑定到HTML属性上。例如：v-bind:href="url" 会将url的值动态绑定到href属性上。
  • v-model：创建双向数据绑定，通常用于表单输入元素。它绑定的是元素的value属性，并监听input事件。当用户更改输入时，数据会自动更新。例如：<input v-model="message"> 会将message与输入框的值保持同步。
特性v-bindv-model
绑定类型单向绑定：数据流向元素。双向绑定：数据和元素相互同步。
应用场景动态设置 HTML 元素的属性（如 href、src）。表单输入元素，保持数据和 UI 的同步（如 input、textarea）。
更新方式数据变，属性更新；但属性变，数据不会更新。数据变，界面更新；界面变，数据也更新。
常见示例<a v-bind:href="url">点击我</a><input v-model="message">

3. Vue.js的组件通信方式及其优缺点

Vue.js的组件通信方式主要有以下几种：

  • 父子组件通信：

    • 父组件通过props向子组件传递数据，子组件通过$emit触发事件传递数据回父组件。
    • 优点：简单直观，易于管理。
    • 缺点：对于深层嵌套的组件，传递数据会变得冗长。

  • 兄弟组件通信：

    • 通过共同的父组件实现数据的共享。
    • 优点：解耦兄弟组件，避免直接互相调用。
    • 缺点：如果组件层级太深，父组件需要维护大量的状态。

  • 全局事件总线：

    • 使用一个中央事件总线（例如Vue.prototype.$bus）实现跨组件的通信。
    • 优点：适合需要跨多个组件的场景。
    • 缺点：全局事件总线可能会造成事件管理的混乱，容易导致命名冲突。

  • Vuex（状态管理）：

    • 使用Vuex管理全局状态，可以在任何组件中访问或修改。
    • 优点：适合复杂应用，易于维护和管理全局状态。
    • 缺点：学习曲线较陡，简单应用不需要使用。

4. Vue.js如何实现父子组件之间的数据传递？

父子组件之间的数据传递通常有两种方式：

  • 父组件向子组件传递数据：通过props传递。

    <child :message="parentMessage"></child>

  • 子组件向父组件传递数据：通过事件触发父组件的方法，使用$emit。

    this.$emit('eventName', data)

5. Vue.js中的响应式原理

Vue.js通过Object.defineProperty或Proxy（Vue 3）实现响应式。当数据发生变化时，Vue会自动触发视图更新。具体原理如下：

  • 数据劫持：Vue会对数据对象的每个属性使用Object.defineProperty，在属性的getter和setter中插入拦截器。
  • 依赖收集：每个访问这个属性的视图组件会成为依赖，Vue会追踪这些依赖。
  • 视图更新：当数据变化时，Vue会通知相关依赖更新视图。

6. 如何在Vue.js中实现路由跳转？

Vue.js中的路由跳转通常使用vue-router。可以使用以下几种方式：

  • 编程式导航：通过router.push()进行跳转。

    this.$router.push('/home')

  • 声明式导航：在模板中使用<router-link>进行跳转。

    <router-link to="/home">Go to Home</router-link>

7. Vue.js中的computed和watch有什么区别？

  • computed：用于计算属性，其值是基于响应式数据计算得来的，具有缓存特性，只有当依赖的响应式数据发生变化时，才会重新计算。
  • watch：用于观察数据的变化，并在变化时执行回调函数。适用于执行异步操作或复杂逻辑。

8. Vue.js中的v-for指令和v-if指令有什么区别？

  • v-for：用于渲染一个列表，遍历数组或对象。

    <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>

  • v-if：用于条件渲染，只有在条件为真时才会渲染元素。

    <p v-if="isVisible">This is visible</p>

9. Vue.js中的mixins和extends的作用及其区别

  • mixins：是一个包含组件选项的对象，可以把多个mixin组合在一起，方便复用代码。

    const mixin = { data() { return { message: 'Hello' } } }

    • 优点：代码复用，多个组件可以共享相同的功能。
    • 缺点：容易导致命名冲突，管理不当会增加维护难度。

  • extends：是一个对象，允许一个组件继承另一个组件的所有选项。类似于JavaScript的继承。

    const extendedComponent = Vue.extend({ data() { return { message: 'Hello' } } })

    • 优点：实现继承。
    • 缺点：和mixins类似，可能导致不容易追踪和管理。

10. Vue.js中的keep-alive组件有什么作用？如何使用？

<keep-alive> 是一个内置的Vue组件，用来缓存不活动的组件，避免重新渲染。这对于性能优化特别有用，尤其是处理频繁切换的组件时。

使用方式：

  • 包裹组件：

    <keep-alive> <component></component> </keep-alive>

  • 动态组件： 在动态组件中，结合<keep-alive>可以缓存组件：

    <keep-alive> <component :is="currentComponent"></component> </keep-alive>

<keep-alive>会缓存被包裹的组件状态，避免它们在切换时重新加载或销毁。


原文地址：https://blog.csdn.net/m0_74374651/article/details/144308343

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024