Vue核心特征

Vue核心特征

1、数据驱动（MVVM）

• Model : 模型层，负责处理业务逻辑以及和服务端进行交互。

• View : 视图层，负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面。

• ViewModel : 视图模型层，用来连接Model 和 View，是Model 和 View之间的通信桥梁。
  
  1、mvc 和 mvvm 的关系？
  其实m(Model 层)和v(View 层) 是相同的，不同的是c(控制层)和vm(viewmodel层)。
  mvvm 本质上就是mvc的改进版，mvvm 层实现了前后端更好的分离，前端需要的数据只需要请求后端的接口即可。
  2、为什么说MVVM更好的实现了前后端的分离？MVVM中的VM层的作用是神马🐎？
  ViewModel 是视图数据层，在这一层，前端开发者从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。
  需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分。而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）；而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。
  View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

  View一般就是我们平常说的HTML文本的Js模板，里面可以嵌入一些js模板的代码。
  ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑，举个例子，比如图片走马灯特效，比如表单按钮点击提交，这些自定义事件的注册和处理逻辑都写在ViewModule里面了。
  Module就更简单了，就是对于纯数据的处理，比如增删改查。
  3、MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处
  a、低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。
  b、可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
  c、独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
  d、可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

2、组件化

1. 什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件
2. 组件化的优势：
   • 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现。
   • 调试方便，调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单。
   • 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级。

3、指令系统

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

• 条件渲染指令 v-if
• 列表渲染指令v-for
• 属性绑定指令v-bind
• 事件绑定指令v-on
• 双向数据绑定指令v-model

没有指令之前我们是怎么做的？是不是先要获取到 DOM 然后在… 干点啥