Vue常见面试题

如何定义 Vue 的动态路由?如何获取传过来的动态参数?

动态路由的定义

动态路由是指把匹配某种模式下的路由映射到同一个组件中,本质是通过 URL 进行传参。例如,有一个商品 Goods 的组件,需要让不同的商品 ID 都映射到这个组件中,此时就需要用到动态路由。在 Vue 中,可以通过在路由路径中使用冒号(:)来绑定动态参数。例如:

javascript复制代码

|---|---------------------------------------------|
| | const routes = [ |
| | { path: '/goods/:id', component: Goods } |
| | ]; |

获取动态参数

  • 使用 params 方式传参时,可以通过 $route.params 来获取动态参数。例如,在上述路由配置中,要获取商品 ID,可以使用 this.$route.params.id
  • 使用 query 方式传参时(例如 <router-link :to="{ path: '/goods', query: { id: goodsId }}">),可以通过 $route.query 来获取动态参数。例如,要获取商品 ID,可以使用 this.$route.query.id

Vue 中 data 的属性可以与 methods 中的方法同名吗?为什么?

不可以 。在 Vue 中,data 的属性与 methods 中的方法不能同名。这是因为 Vue 在处理组件时会将 datamethods 合并到同一个对象中(即组件的实例对象),如果它们同名,会导致属性被方法覆盖,从而引发不可预期的行为。

什么是 Vue 的自定义指令?自定义指令的应用场景有哪些?

自定义指令

Vue 中的自定义指令是一种特殊的标记,用于在 DOM 元素上执行特定的操作。通过自定义指令,开发者可以扩展 Vue 的功能,实现一些内置指令无法完成的操作。

自定义指令的应用场景

  • 表单防止重复提交:可以使用自定义指令来限制表单的重复提交。
  • 图片懒加载:通过自定义指令,可以实现图片的懒加载功能,提高页面的加载速度。
  • 一键 Copy 功能:自定义指令还可以用于实现一键复制文本到剪贴板的功能。

Vue 的模板语法使用的是哪个 Web 模板引擎?介绍下该模板引擎

Vue 的模板语法使用的是 Vue 自带的模板引擎

Vue 模板引擎介绍

Vue 模板引擎是 Vue.js 框架中的一个重要部分,它负责解析和渲染 Vue 组件中的 HTML 模板。Vue 模板引擎采用了基于 HTML 的模板语法,允许开发者在 HTML 模板中直接使用 Vue 的特性和指令,从而实现动态绑定和响应式的数据渲染。Vue 模板引擎具有以下特点:

  • 简洁直观的语法:Vue 模板引擎采用类似于 HTML 的模板语法,易于理解和使用。
  • 强大的数据绑定功能:支持双向数据绑定和单向数据流,能够自动同步数据和视图。
  • 高效的组件化开发模式:允许将页面分解为多个可重用的组件,提高代码的可维护性和重用性。

什么是 Vue 的单向数据流和双向数据流?

单向数据流

在 Vue 中,单向数据流指的是数据只能从父组件流向子组件,子组件不能直接修改父组件传递过来的数据(props)。这种机制保证了组件之间的数据流向是清晰且可预测的,有利于应用的维护和管理。

双向数据流

虽然 Vue 官方强调组件间的数据流是单向的,但 Vue 同时也支持数据的双向绑定。这主要体现在表单元素和 Vue 实例数据的同步上。双向绑定并不是指数据可以从子组件直接修改到父组件,而是通过 v-model 指令在表单元素和 Vue 实例的数据之间建立了一个双向的数据通道。当用户在表单元素中输入数据时,这个数据会实时同步到 Vue 实例的数据中;反之,当 Vue 实例的数据发生变化时,视图也会自动更新。

Vue 中 created 和 mounted 生命周期钩子有什么区别?

created

  • 在组件实例被创建之后立即执行。
  • 这时候组件的数据观测(data observation)和事件/生命周期钩子事件初始化都已完成。
  • 适合用于执行一些初始化的操作,例如数据的获取、事件的订阅等。
  • 但在这个阶段,组件还未挂载到 DOM 中,因此无法进行 DOM 操作。

mounted

  • 在组件被挂载到 DOM 后执行。
  • 这是执行 DOM 操作、调用外部 API 等任务的好时机,因为此时组件已经在页面上可见。
  • 如果需要访问 DOM 元素,最好在 mounted 钩子中进行。

Vue 2.0 的 v-html 指令不再支持使用过滤器,还有哪些处理 HTML 内容的方法?

在 Vue 2.0 中,如果 v-html 指令不再支持使用过滤器来处理 HTML 内容,可以考虑以下几种方法:

  • 全局方法:可以在 Vue 实例的原型上定义一个全局方法,用于处理 HTML 内容。然后,在模板中使用这个方法来处理数据。
  • computed 属性:可以使用 computed 属性来处理 HTML 内容,并在模板中绑定这个 computed 属性。
  • $options.filters :虽然不推荐,但仍然可以在 Vue 实例的 filters 选项中添加自定义过滤器来处理 HTML 内容(尽管 v-html 本身不支持过滤器,但可以在数据绑定前使用过滤器处理数据)。

有哪些定义 Vue 组件模板的方法?

定义 Vue 组件模板的方法主要有以下几种:

  • 单文件组件(.vue 文件) :这是最常见的方法,将模板、脚本和样式都放在一个 .vue 文件中。这种方法使得组件的结构更加清晰,易于维护。
  • 内联模板:在组件的注册选项中直接定义模板字符串。这种方法适用于简单的组件或临时性的测试。
  • X-Template :在 <script> 标签中使用 type="text/x-template" 来定义模板。这种方法在 Vue 早期版本中较为常见,但在现代开发中较少使用。

为什么 Vue 写组件时可以放在 .vue 文件里?可以使用其他文件后缀吗?

原因

Vue 推荐将组件写在 .vue 文件中,这是因为 .vue 文件是一种单文件组件(Single File Component,SFC)格式,它允许将模板、脚本和样式都放在一个文件中。这种格式使得组件的结构更加清晰,易于维护和管理。

其他文件后缀

虽然 Vue 官方推荐使用 .vue 文件作为组件的文件后缀,但理论上也可以使用其他文件后缀(如 .js.jsx.ts 等)。然而,这样做会失去 .vue 文件带来的诸多优势,如组件结构的清晰性、易于集成到构建工具中等。因此,在实际开发中,建议遵循 Vue 官方的推荐,使用 .vue 文件作为组件的文件后缀。

Vue 中组件、插件、插槽三个概念的区别是什么?

组件

组件是 Vue.js 的核心功能之一,它允许开发者将页面分解为多个独立的、可复用的部分。每个组件都包含自己的模板、数据和逻辑。组件化开发使得代码更加模块化和易于维护。

插件

插件是 Vue.js 生态系统中的一个重要部分,它允许开发者扩展 Vue 的功能。插件通常包含全局方法或属性、全局资源(如指令、过滤器、组件等)以及一个 install 方法(用于安装插件)。通过插件,开发者可以轻松地集成第三方库或实现自定义的功能。

插槽

插槽是 Vue.js 中用于内容分发的一种机制。它允许开发者在组件的模板中预留一些占位符(即插槽),然后在父组件中使用这些插槽来插入内容。插槽使得组件更加灵活和可扩展,因为它允许父组件向子组件传递自定义的内容。

什么是 Vue 的 v-model?有什么作用?

v-model

v-model 是 Vue.js 中用于实现双向数据绑定的指令。它主要用于表单元素(如输入框、选择框等)和 Vue 实例数据之间的同步。

作用

  • 当用户在表单元素中输入数据时,v-model 会自动将输入的数据同步到 Vue 实例的数据中。
  • 当 Vue 实例的数据发生变化时,v-model 也会自动更新表单元素的内容。
  • 通过 v-model,开发者可以轻松地实现表单数据的双向绑定和实时更新。

怎么在组件初始化时立即调用 Vue 的 watch 函数?

在 Vue 中,watch 函数通常用于观察和响应 Vue 实例上数据的变化。然而,watch 函数本身并不是在组件初始化时立即调用的,而是在被观察的数据发生变化时触发。

如果需要在组件初始化时立即执行某些操作,并且这些操作依赖于被观察的数据,可以考虑在 createdmounted 生命周期钩子中调用这些方法。同时,可以在 watch 函数中设置相应的监听逻辑,以便在数据变化时执行相应的操作。

另外,Vue 3 引入了 watchEffect 函数,它可以在组件初始化时立即执行一个函数,并且该函数会响应式地跟踪其依赖的数据。当这些数据发生变化时,watchEffect 会重新执行该函数。

在.vue 文件中,style 和 script 必须要写么?为什么?

不一定 。在 .vue 文件中,stylescript 部分并不是必须的。然而,它们通常是构建 Vue 组件时的重要组成部分。

  • scriptscript 部分用于定义组件的 JavaScript 逻辑,包括数据、方法、计算属性等。它是组件的核心部分,用于处理组件的行为和状态。

* stylestyle 部分用于定义组件的样式。通过样式,可以控制组件的外观和布局

相关推荐
摇头的金丝猴8 分钟前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
清清ww20 分钟前
【TS】九天学会TS语法---计划篇
前端·typescript
南棱笑笑生44 分钟前
20241105编译Rockchip原厂的Android13并给荣品PRO-RK3566开发板刷机
java·开发语言·前端
dy17171 小时前
el-date-picker日期选择器动态设置日期
前端·vue.js·elementui
浏览器爱好者1 小时前
Chrome与火狐哪个浏览器的性能表现更好
前端·chrome
Topstip1 小时前
在 Google Chrome 上查找并安装 SearchGPT 扩展
前端·人工智能·chrome·gpt·ai·chatgpt
gqkmiss1 小时前
Chrome 130 版本开发者工具(DevTools)更新内容
前端·chrome·chrome devtools·开发者工具·chrome 130
codeGoogle1 小时前
计算机书籍打包
前端·后端·编程语言
小远yyds1 小时前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
weixin_516875652 小时前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js