Vue源码全方位深入解析

一、资源

1. Vue.js解密文档：https://ustbhuangyi.github.io/vue-analysis/prepare/

2. flow类型注释官方文档：https://flow.org/en/docs/types/

二、环境配置

1. flow

(1) npm install --global flow-bin 全局安装

(2) 新建一个文件夹，比如flow-test，然后在文件夹下新建js文件，比如index.test（文件开头必须有/@flow/，不然flow不会检查这个文件）。在命令行中cd到flow-test文件夹。

(3) 执行 flow init 初始化配置，然后执行flow查看错误情况。（当进行类型注释时，在js文件中会报错，但是在命令行中输入flow进行静态类型检查不会报错）。

三、基础知识

1.静态类型与动态类型

编程语言一般分为动态类型、静态类型和强类型、弱类型，例如Java是静态、强类型编程语言，而JavaScript是动态、弱类型编程语言。

（1）动态类型语言

是运行期间才做数据类型检查的语言，即动态类型语言编程时，永远不用给任何变量指定数据类型。该语言会在第一次赋值给变量时，在内部将数据类型记录下来。例如：JavaScript、Python、PHP。

优点：方便阅读，不需要写非常多的类型相关的代码；

缺点：不方便调试，命名不规范时会造成读不懂，不利于理解等。

（2）静态类型语言

是编译期间做检查数据类型的语言，即写程序时要声明所有变量的数据类型，是固定的。使用数据之前，必须先声明数据类型（int ,float,double等）。相当于使用之前，首先要为它们分配好内存空间。

例如：C/C++是静态类型语言的典型代表，其他的静态类型语言还有C#、JAVA等。

优点：结构非常规范，便于调试，方便类型安全

缺点：为此需要写更多类型相关代码，较复杂。

四、Vue源码构建

1. 通常我们利用 vue-cli 去初始化我们的 Vue.js 项目的时候会询问我们用 Runtime Only 版本的还是

   Runtime + Compiler 版本。

   // 需要编译器的版本
   new Vue({
   template: ‘

   {{ hi }}
   ’
   })

因为在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。

五、数据驱动

1. Vue.js 中 Virtual DOM 是借鉴了一个开源库 snabbdom的实现，然后加入了一些 Vue.js 特色的东西。

2. 初始化一个vue项目后，在node_modules\vue\dist\vue.esm.js的_init()方法中插入debugger。

npm run dev后，打开http://localhost:8080/#/网页，查看开发者工具的source可调试代码。

---

作者：deryabuder
来源：CSDN
原文：https://blog.csdn.net/sinat_31900531/article/details/89047922
版权声明：本文为博主原创文章，转载请附上博文链接！