vue面试题——描述一下vue

news2024/11/26 1:53:52

1 vue是什么

简单点说，vue就是一个用于创建用户界面的JavaScript框架，同时也是一个创建单页面应用的Web应用框架，Vue关注的核心是MVC（Modle-View-Controller)中的视图层（View）。同时，Vue能方便地获取数据，并且通过组件内部特定的方法（主要是双向绑定）实现视图与模型的交互。

2 Vue的核心特性

2.1 数据驱动（MVVM）

（1）什么是数据驱动
所谓数据驱动，就是视图是由数据驱动生成，我们更新视图是通过修改数据更新的，而不是直接操作DOM。

（2）MVVM

MVVM表示的是Model-View-ViewModel

Model：模型层，负责业务处理逻辑以及和服务端进行交互
View：视图层，负责将数据模型转化为UI（界面）展示出来，可以简单理解为HTML页面
ViewModel：视图模型层，用来连接Model和View（两者通信的桥梁）

下面用代码展示Model、View以及ViewModel到底是什么：

在这里插入图片描述

View和Model是如何通过ViewModel进行通信的？

①　从View这边看：ViewModel中的DOM监听器（DOM Listeners）监听DOM元素的变化，当DOM元素发生变化时，Model中的数据也随之变化。
eg.当我们从输入框输入数据时，Model中的数据页会更新为我们输入的数据

②　从Model这边看：数据绑定绑定了Model中的数据，Model钟的数据变化会反馈到视图中。
eg.在message中输入‘哈哈哈’字符串，视图中的输入框中也会出现该字符串。

2.2 组件化

（1）什么是组件化
Vue组件化是指将一个应用划分为多个独立的、可复用的模块，每个模块都包含自己的HTML模板、CSS样式以及JavaScript逻辑三个部分。在Vue中，每个.vue文件就是一个组件。

（2）组件化的优点

降低系统的耦合度（模块间的依赖程度）：需求相同的组件可以相互替换，快速完成开发。例如，输入框可以换成下拉框、日历等。
调试方便：由于组件之间是低耦合的，因此可以单独对组件进行调试，而不是对整个系统进行调试。
提高系统的可维护性：由于每个组件的职责单一，并且组件在系统中是可以被复用的，因此对代码进行优化可获得系统的整体升级。

2.3 指令系统

指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

常用的指令：

内容渲染指令‌：
v-text‌：将变量的值作为纯文本输出。
v-html‌：‌将变量的值作为HTML解析和渲染。
条件判断指令‌：
‌v-if：根据条件判断是否渲染元素。
‌v-else‌、‌v-else-if‌：与v-if配合使用进行条件判断。
‌v-show‌：根据条件控制元素的显示和隐藏。
事件绑定指令‌：
‌v-on‌（或缩写为@）：绑定事件监听器。
属性绑定指令‌：
v-bind‌：动态绑定属性。
‌列表渲染指令‌：
v-for‌：‌基于数据集合渲染列表。
双向绑定指令‌：
v-model‌：‌在表单控件上创建双向数据绑定。
其他指令‌：
‌v-slot‌：插槽。
v-once‌：‌只渲染元素和组件一次。
‌v-cloak‌：防止模板内容在编译完成前显示。