2021年Vue框架面试题解析
数据绑定
1. v-model 的原理是什么？
v-model 指令是 Vue.js 中用来实现双向数据绑定的语法糖。它本质上是 v-bind 和 v- 的组合，用于在表单元素和组件之间同步数据。
- 对于文本框、文本域等表单元素，
v-model会监听事件，并在事件触发时更新绑定的数据。 - 对于复选框、单选按钮等表单元素，
v-model会监听change事件。
示例：
<div>
"text" v-model="message"/>
{{ message }}
div>
2. 如何实现 Vue.js 中的数据双向绑定？
Vue.js 中的数据双向绑定是通过数据劫持和发布-订阅模式实现的。
- 数据劫持: Vue.js 使用
Object.defineProperty()方法劫持数据的getter和setter，当数据发生变化时，会触发setter，从而通知订阅者更新视图。 - 发布-订阅模式: Vue.js 内部维护了一个订阅者列表，当数据发生变化时，会遍历订阅者列表，并调用订阅者的更新函数。
组件化开发
3. Vue 组件之间如何进行通信？
Vue 组件之间可以通过以下几种方式进行通信：
- Props & Events: 父组件通过 Props 向子组件传递数据，子组件通过 Events 向父组件发送消息。
- Vuex: Vuex 是 Vue.js 的状态管理库，可以用于管理应用级别的共享状态。
- Provide & Inject: Provide/Inject 允许祖先组件向其所有子孙组件注入依赖。
- $attrs & $listeners:
$attrs包含了父组件传递给子组件但子组件未声明 props 的属性，$listeners包含了父组件监听的事件。 - EventBus: 可以使用 EventBus 创建一个全局的事件总线，用于组件之间的通信。
生命周期
4. 描述 Vue.js 组件的生命周期钩子函数。
Vue.js 组件的生命周期钩子函数允许开发者在组件的不同阶段执行自定义逻辑。主要的生命周期钩子函数包括：
- beforeCreate: 组件实例刚被创建，数据观测和事件机制尚未初始化。
- created: 组件实例创建完成，数据观测和事件机制已初始化，可以访问 data、computed、methods 等。
- beforeMount: 组件即将挂载到 DOM 上。
- mounted: 组件已挂载到 DOM 上。
- beforeUpdate: 组件数据更新之前。
- updated: 组件数据更新之后。
- beforeDestroy: 组件实例销毁之前。
- destroyed: 组件实例销毁之后。
路由管理
5. Vue Router 的工作原理是什么？
Vue Router 是 Vue.js 官方的路由库，它通过监听 URL 的变化来动态渲染不同的组件。
- 路由配置: 开发者需要先定义路由表，将 URL 路径与对应的组件关联起来。
- 路由匹配: 当 URL 发生变化时，Vue Router 会根据当前 URL 匹配对应的路由规则。
- 组件渲染: Vue Router 会根据匹配到的路由规则，渲染对应的组件。
其他
6. 什么是虚拟 DOM？
虚拟 DOM (Virtual DOM) 是指用 JavaScript 对象来表示真实 DOM 的一个抽象层。
- 创建虚拟 DOM: 当组件的状态发生变化时，Vue.js 会先生成一个新的虚拟 DOM 树。
- 比较虚拟 DOM: Vue.js 会比较新旧两个虚拟 DOM 树的差异。
- 更新真实 DOM: Vue.js 只会将差异部分更新到真实的 DOM 上。
使用虚拟 DOM 可以提高页面渲染效率，因为它可以减少对真实 DOM 的操作次数。
暂无评论