如何定义 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 在处理组件时会将 data
和 methods
合并到同一个对象中(即组件的实例对象),如果它们同名,会导致属性被方法覆盖,从而引发不可预期的行为。
什么是 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
函数本身并不是在组件初始化时立即调用的,而是在被观察的数据发生变化时触发。
如果需要在组件初始化时立即执行某些操作,并且这些操作依赖于被观察的数据,可以考虑在 created
或 mounted
生命周期钩子中调用这些方法。同时,可以在 watch
函数中设置相应的监听逻辑,以便在数据变化时执行相应的操作。
另外,Vue 3 引入了 watchEffect
函数,它可以在组件初始化时立即执行一个函数,并且该函数会响应式地跟踪其依赖的数据。当这些数据发生变化时,watchEffect
会重新执行该函数。
在.vue 文件中,style 和 script 必须要写么?为什么?
不一定 。在 .vue
文件中,style
和 script
部分并不是必须的。然而,它们通常是构建 Vue 组件时的重要组成部分。
- script :
script
部分用于定义组件的 JavaScript 逻辑,包括数据、方法、计算属性等。它是组件的核心部分,用于处理组件的行为和状态。
* style :style
部分用于定义组件的样式。通过样式,可以控制组件的外观和布局