Vue代码学习总结

1.Vue响应性原理

getter&setter

        Vue利用了JavaScript中的一个Object.defineProperty()函数实现的响应式，这个函数接受三个参数，对象，对象的键，以及要修改键对应的值的函数集(?).利用这个函数我们可以重定义对象每一个属性的getter和setter函数。令它们在每次值改变的时候可以发出通知并改变所有引用了它的地方。

依赖跟踪

        单单使用getter&setter只能再对象数据层面达到响应式，当我们更新了数据之后，理所应当期望所有引用了该值的函数也会做出响应的改变，这时就需要依赖跟踪了。

        简单来讲，就是创建一个类，他提供一种类似于插眼的功能（depend()）,我们再需要跟踪的函数中插入这个眼，当我们需要更新的时候，就调用这个眼，它会使用最新的响应式数据重新调用这个函数。

迷你watcher

        将上述两个功能组合起来，就构成了一个迷你的vue响应式原型。

2.插件功能

vue中有一个强大的功能就是提供插件的使用。

使用Vue.mixin(options)可以把代码片段混入到所有组件中，事实上，Vue就是利用这个api将所有的Vue组件带上了响应性。

3.Render Function（渲染函数）

渲染函数是构成完整响应性渲染系统的另一半。（前面的功能渲染数据，后面的功能渲染页面）Vue的template实际上就是通过渲染函数渲染出来的。

在Vue上下文中，我们第一次渲染一个vue应用是，会将template放到渲染函数中进行编译。Render函数实际上就是一个返回虚拟DOM的函数，让后Vue基于虚拟DOM生成真实DOM。或许修改时每当渲染函数的依赖发生改变，将会再次调用渲染函数返回一个新的虚拟DOM，和旧的虚拟DOM比较，将最小量的修改应用到真实DOM中。（这样做是因为虚拟DOM比真实DOM更节省资源）

4.响应性和Render Function整合

 每一个组件都有一个渲染函数，它实际上包装在我们之前实现的autorun函数（笔记1）中，当数据发生变化的时候，观察者（wathcer）通过调用data属性中的getter收集依赖项，并监听setter，将收集到的改变通知到渲染函数，渲染函数再生成一个新的虚拟DOM。只要我们依赖的渲染属性发生变化，就会不断循环上述步骤。

相比于React自上而下的渲染模型，Vue可以说省去了一部分优化的工作。但是也付出了一部分将数据转换为getter和setter的开销。因此有了React上限高（优化做得好的话），下限低（优化不好），而Vue下限高（一部分优化工作自动完成），上限低（相比React开销更大一些）。但是在实际应用中，两者的差距其实很小，只有在极端情况下才会出现较大偏差。

5.高阶组件

简单来说，就是一个封装了一系列功能的组件，他与外界的联系只有简单的props，这样保证耦合度最低，只要提供props就可以使用这个组件，复用性强。

高阶组件和mixin的区别

mixin也可以实现高阶组件的功能，缺点是不能复用，优点是比高阶组件开销要小。适用于情况固定的需求。

高阶组件优点是可复用性高，耦合度低，但是如果过多使用高阶组件，组件的层级会难以定位，此时效果可能不如mixin。

6.状态管理

在Vue中，基础的状态管理就像是在组件中各管各的，需要组件间通信就使用props或者bus.js之类的技术实现。这在简单的应用场景中已经够用了。但是在复杂的场景，组件之间要频繁交流的时候，这个方法显得十分笨重。

因此提出了VueX的概念，把需要统一管理的状态抽象到一个容器中，所有组件全部访问这个容器，避免了传值的问题。

7.Vue-router路由

Vue采用的是单页面路由，即只有一个页面，跳转的时候通过改变路由哈希，实现页面切换。

Vue-router提供路由表用以统一管理路由。