Vue学习心得之理解原理篇

写这篇文章的初衷是想总结本身的学习经验，但愿对看到的人有所帮助，若有错误，请您指出，以避免误人子弟，十分感谢！

---

如今前端比较流行的框架有 Vue、React、Angular三种。我的比较看好Vue，性能强大，并且可学性很强，比较适合新手学习。

首先vue是一款轻量级的MVVM框架，压缩完以后只有20k+,这个是对比angular、react的明显优点，并且学习曲线平滑，不用像学react同样，还要学习react全家桶套餐。也不用像学习angular同样，要记不少概念，angular的开发思惟很像后台的开发思惟（例：依赖注入），也不适合前端小白。Vue还结合了angular的指令跟react的组件化思想，以上大概介绍了vue的优点，想了解vue对比其余框架的细节，能够去官网上查看https://cn.vuejs.org/v2/guide...。

Vue的核心思想是数据驱动（DOM是数据的一种天然映射），怎么理解尼？若是不用vue，那么像咱们从后台接口获取数据的时候，须要手动的去修改DOM来触发视图的变化，或者前端交互须要改变数据的时候，同样须要手动去操做DOM，这样作不只繁琐并且很是容易出错！用了vue就省去了去手动操做DOM的步骤，你只须要去修改数据，Vue会自动去触发Dom的改变，Vue会经过VM层中的Directives去对Dom作一层封装，当数据发生变化时，会通知指令去触发对应DOM的变化。数据驱动DOM的变化，DOM是数据的一种天然映射这句话是否是就懂了一些！Vue还会对视图（View）去作一些监听，当咱们修改视图的时候，vue会经过VM层中的DOM Listeners监听到视图的变化，进而通知数据（Model）改变。这就造成了数据的双向绑定。具体看下图：

那么Vue是怎么作到的尼？数据相应原理（ 数据（Model）改变如何驱动视图（view）自动更新 ）？

其实监听到DOM的变化相对简单，经过监听绑定的事件就能够实现。关键在于如何获取到数据的变化，这就用到了ES5的Object.definePrototype属性，这也是Vue不支持IE6-IE8的缘由。(ps:具体怎么驱动改变在本章就不介绍了，后续会写一篇专门的文章来介绍)

Vue的另外一个核心思想是组件化，目的是拓展HTML元素，封装一些可重用的代码。那么什么是组件，怎么写组件？我在刚学习的时候就有这个疑问，其实跟react同样，整个页面任何一个独立的可视/可交互区域都是一个组件，它们能够相互嵌套。每个组件在建立的时候都会生成一个viewModel树（相似DOM树），它与DOM树是一一对应的关系，这个相似DOM的树就是虚拟DOM（vDOM）。

提到vDOM就不得不提vDOM的diff算法原理，本章简单提一嘴，vDOM的节点为虚拟节点（vNODE），Vue即仅在同级的vnode间作diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新（ps:后续会写一篇专门关于diff算法的理解文章）

本章主要介绍了VUE的原理和优点，下一章将介绍怎么开始一个作一个VUE项目 而且分享我在开发学习时候疑问，以及一些问题的解决方案