在阅读源代码之前，我们需要先了解Vue最基础的用法，官网示例如下：
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
无论我们的项目如何设计，Vue都是从new一个Vue的实例开始的，阅读源代码的一个起点就在这，为什么说是一个起点呢，因为这里有一个很容易混淆的概念：类和实例，我们这里用Vue大写字母开头的表示Vue.js的类、用vue小写字母开头的表示类实例
- 类
js中单纯的类是没有Vue所需的大量功能的，而赋予Vue能力的这个行为叫提供Vue.js的Runtime，也就是浏览器读取Vue.js的编译产物时执行的对Vue的定义操作，这个操作的实现在src/core/instance/index.ts - 实例
创建Vue的实例vue，实际是执行了Vue的构造函数，所以这里执行的是src/core/instance/init.ts的_init函数
当然，单纯的用类和实例划分是不对的，但因为js是一门动态语言，各种概念混杂边限模糊、而Vue.js项目现代化的项目架构又和浏览器的运行环境八杆子打不着，让很多经验不够丰富的开发者无法理解其运行原理，所以用这样一种定义方式让人更容易理解。
如果你熟悉一门编译型语言的话，可以这样类比：
在Vue.js的这套架构下，我们可以把ECMAScript规范理解成ARM指令集、把V8理解成ARM芯片型号、把浏览器理解成操作系统、把TypeScript理解成业务的编写语言、把编译产生的JavaScript代码理解成机器码、把浏览器<script />标签理解为操作系统load机器码、把new Vue()理解成软件启动。
对整体的运行机制有了一定的了解后，就可以开始阅读Vue.js的源代码了。
网友评论