8、声明式和命令式

8、声明式和命令式

原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：

命令式编程和声明式编程；

命令式编程关注的是 “how to do”，声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；

在原生的实现过程中，我们是如何操作的呢？

我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；

这样的编写代码的过程，我们称之为命令式编程；

在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；

在Vue的实现过程中，我们是如何操作的呢？

我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；

这样的编写代码的过程，我们称之为是声明式编程；

目前Vue、React、Angular的编程模式，我们称之为声明式编程；

9、MVVM模型

MVC和MVVM都是一种软件的体系结构

MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；

MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

通常情况下，我们也经常称Vue是一个MVVM的框架。

Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

① MVVM介绍

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）

② MVVM的特性

低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变

可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）

独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写

③ MVVM的逻辑

10、Vue的源码

如果想要学习Vue的源码，比如看createApp的实现过程，应该怎么办呢？

第一步：在GitHub上搜索 vue-next，下载源代码；

这里推荐通过 git clone 的方式下载；

第二步：安装Vue源码项目相关的依赖；

执行 yarn install

第三步：对项目执行打包操作

执行yarn dev（执行前修改脚本）

"scripts": {

"dev": "node scripts/dev.js --sourcemap"

}

第四步：通过 packages/vue/dist/vue.global.js 调试代码