Vue源码解读：01核心思想篇

第一节·数据驱动

1.什么是数据驱动？

数据驱动是vuejs的核心思想之一，有人称其为vuejs最大的特点。所谓数据驱动就是指数据状态变化时，自主得去更新与其有依赖的视图。数据驱动的关键在于驱动，这里的驱动是自主的，生活中有一个词叫做自动化，我简单的认为数据驱动思想，是自动化思想在前端编程自动化上的一种应用，数据驱动是将对dom的手动操作，自动化了，它根据数据状态的变化，自动更新操作视图。使用过jQuery的同学应该有体会，数据驱动带来的“自动化”，其实省去了许多操作dom的工作，维护也更加方便。

我对数据驱动的定义，简单总结为以下三点：

①数据驱动是指根据数据状态变化，自主更新视图。

②数据驱动是自动化思想，在前端编程自动化上的应用。

③数据驱动使得操作dom，从手动操作，变成了自动操作，是一种自动化表现。

2.数据驱动的工作原理

通过源码，我们可以看到，vuejs核心（core）源码下，就6个文件夹，其中一个叫observer，这里面放置的就是实现数据驱动的主要代码，从文件夹名字，我们就可以大概猜测，它是通过观察者模式（发布-订阅模式）结合数据劫持实现的。在vue中2中实现数据劫持的方法主要是通过Object.defineProperty()将object类型的数据转变成可观测的数据，Object.defineProperty()对数组类型的数据操作是无效的，在vue2中是通过重写操作数组的7个方法实现的数据变化观测。据了解，vue3使用了新的办法实现数据劫持，它就是es5的proxy对象。

将数据变成可观测之后，那么我们就知道了数据什么时候会被读取，值什么时候发什么改变，然后此时，根据数据的变化情况，更新视图，这样就达到了数据驱动的效果。关于observer的内容后面会专门用变化侦测篇来详细记录。

第二节·组件化系统

1.什么是组件化？

vue组件是一种拓展HTML元素，将要展示的内容分成相对独立的拓展HTML元素，即分成不同组件的过程，或在设计构建视图的编码时，将相对独立的可视区域，以独立组件的形式构建的过程，就是组件化。

2.组件化的优点。

每一个组件，可以对一个viewModel（简写vm，可以是vue实例）。视图页面是组件的容器，组件化之后，我们可以任意根据需求自由嵌套组合组件，最后形成一个个完整页面。组件具有高内聚低耦合的特性，那么复用性更好，维护成本更低，提高开发效率，这些优点就呼之欲出了。

3.vue实现组件注册的原理：暂略。

4.vue中如何注册使用组件：使用搜索引擎吧。