1.前言

思想的东西最不好理解

一个新技术出现固然重要,但更重要的是背后的思想

理解了思想才能把握大势,不管以后再出什么框架,都是手到擒来

2.废话不多说,先贴个vue的代码

感受下 vue的 原理

<!-- 宿主 -->
    <div id="app">
        {{msg}}
    </div>
    <script src="./vue.js"></script>
    <script>
       var ve = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        })
        var count = 0
        setInterval(()=>{
            count ++
            ve.msg = count
        },1000)
    </script>

3. 再贴个经典的MVVM图示

4. vue基本理念

4.1 数据驱动

回想下前端的一些理念

js DOM驱动  以DOM/标签为出发点

node.js事件驱动 以事件为出发点

数据驱动当然也就是一切 以数据为核心 考虑问题,以数据为出发点;例如修改界面,想到的不是DOM操作,而是数据怎么改

4.2 采用MVVM

Model  -- ViewModel --View

vue的核心思想都封装 那个绿盒子里 也就是 ViewModel

用户使用的时候不需要了解细节,只要用起来爽就行,因为顺手Vue把 这个左侧的view也实现了

View 就是你视图  根组件里面的vue管理的视图

Model 就是你 data的数据,通常都是通过ajax请求获取的数据

5.  web1.0  MVC 开发模式和框架

前端展 示以 模板的形式出现。典型的框架就是Spring、Structs、Hibernate。记得刚开始工作的时候 iOS开发也是典型的MVC

优点

使用这种分层架构，职责清晰，代码易维护。

但这里的 MVC仅限于后端，前后端形成了一定的分离， 前端只完成了后端开发中的 view层。

问题

1. 前端页面开发效率不高
2. 前后端职责不清

6.  web2.0 前端MVC

前端的 MVC与后端类似，具备着View、Controller 和 Model。

Model：负责保存应用数据，与后端数据进行同步

Controller：负责业务逻辑，根据用户行为对 Model 数据进行修 改 View：负责视图展示，将 model中的数据可视化出来。

mvc.png

缺点

1.过于灵活,导致数据流混乱

2.View比较庞大，而 Controller 比较单薄：由于很多的开发者都会在 view中写一些逻辑代码，逐 渐的就导致view 中的内容越来越庞大，而 controller 变得越来越单薄

7. MVP

MVP与MVC很接近，P指的是Presenter，presenter可以理解为一个中间人，它负责着View和Model之 间的数据流动，防止View和Model之间直接交流

图片1.png

presenter负责和 Model进行双向交互，还和 View进行双向交互。这种交互方式， 相对于 MVC来说少了一些灵活， View变成了被动视图，并且本身变得很小。虽然它分离了 View和 Model。但是应用逐渐变大之后，导致 presenter的体积增大，难以维护。

8.  MVVM

MVVM可以分解成(Model-View-VIewModel)。ViewModel可以理解为在 presenter基础上的进阶版

ViewModel通过实现一套数据响应式机制自动响应 Model中数据变化；同时 Viewmodel会实现一套更新策略自动将数据变化转换为视图更新；通过事件监听响应 View中用户交互修改 Model中数据。这样在 ViewModel中就减少了大量 DOM操作代码。 MVVM在保持 View和 Model松耦合的同时，还减少了维护它们关系的代码，使用户专注于业务逻辑，兼顾开发效率和可维护性

9. 三种模式对比总结

这三者都是框架模式，它们设计的目标都是为了解决Model和View的耦合问题。

MVC模式出现较早主要应用在后端，如Spring MVC、ASP.NET,MVC等，在前端领域的早期也有应 用，如Backbone.js。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。

MVP模式在是MVC的进化形式，Presenter作为中间层负责MV通信，解决了两者耦合问题，但P层过于臃肿会导致维护问题。

MVVM模式在前端领域有广泛应用，它不仅解决MV耦合问题，还同时解决了维护两者映射关系的 大量繁杂代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。

10 MVVM 三要素

10.1 数据响应式

监听数据变化并在视图中更新

Object.defineProperty()   vue 2x

Proxy                                      vuex 3x

10.2 模板引擎

提供描述视图的模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析

插值:{{}}

指令: v-bind,v-on,v-model,v-for,v-if,v-show

10.3 渲染

VNode怎么变为 html

如何将模板装换为 html

在底层实现上,Vue将模板编译成虚拟DOM,结合响应式系统,Vue能够智能的计算出最少需要渲染多少组件并把DOM操作次数减到最少

模板----> vdom--->dom

11. diff算法

书接上文 怎么高效渲染

1.diff算法是虚拟DOM 技术的必然产物：通过新旧虚拟 DOM作对比（即diff），将变化的地方更新 在真 实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。

2.vue 2.x中为了降低Watcher 粒度，每个组件只有一个 Watcher 与之对应，只有引入diff才能精确 找到 发生变化的地方。

3.vue中 diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode 和新的 渲染 结果newVnode，此过程称为patch。

4.diff 过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者 文 本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做 4 次比对尝试， 如果 没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key 通 常可以非 常精确找到相同节点，因此整个 patch过程非常高效。

12. key的作用

1.key 的作用主要是为了高效的更新虚拟 DOM，其原理是vue在 patch过程中通过key 可以精准判 断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个 patch过程更加高效，减少 DOM操作量，提高性能。

2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的 bug
3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以 区分它们，否则 vue只会替换其内部属性而不会触发过渡效果

13 .设计原则

1.渐进式框架

与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。

Vue的核心库只关注视图层，不仅 易 于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结 合使 用时，Vue也完全能够为复杂的单页应用提供驱动。

2.易用、灵活和高效

易用性

vue 提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应 用 的核心业务即可，只要会写 js、html 和 css 就能轻松编写 vue 应用。

灵活性

渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要 vue 核心特性即可完成功能； 随 着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli 等库和工具，不管是应用体积 还是 学习难度都是一个逐渐增加的平和曲线。

高效

超快的虚拟 DOM 和 diff 算法使我们的应用拥有最佳的性能表现。 追求高效的过程还在继续，vue3 中引入 Proxy 对数据响应式改进以及编译器中对于静态内容编译的改 进 都会让 vue 更加高效