vue面试题——描述一下vue
目录
- 1 vue是什么
- 2 Vue的核心特性
- 2.1 数据驱动(MVVM)
- 2.2 组件化
- 2.3 指令系统
- 3 Vue跟传统开发的区别
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:防止模板内容在编译完成前显示。
3 Vue跟传统开发的区别
主要的区别有以下两个:
- Vue所有的界面事件都是去操作数据的,而传统开发操作DOM
- Vue所有界面的变动都是通过数据自动绑定出来的,而传统开发操作DOM