vue源码学习

目录结构

Vue的源码主要存放在src目录下，目录结构如下：
（1）compiler：编译相关
（2）core：核心代码
（3）platforms：不同平台的支持
（4）server：服务端渲染
（5）sfc：.vue文件解析
（6）shared：共享代码

源码构建

基于npm托管的项目均会有一个对项目的描述文件“package.json”，通常会通过配置script字段作为NPM的执行脚本。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "webpack --config webpack.config.js",
    "start": "webpack-dev-server",
    "build": "node scripts/build.js"
    “build:weex”:"npm run build -- weex"
  },

先打开构建的入口js文件，在scripts/build.js中，通过在配置文件中读取配置，配置文件如下：

‘web-runtime-cjs’:{
	entry: resolve('web/entry-runtime.js'),   //构建入口js文件地址
	dest:resolve('dist/vue.runtime.common.js'),   //构建后的js文件地址
	format:'cjs',  //构建的格式  cjs表示CommonJS规范
	banner
}

使用vue-cli初始化vue项目的时候两种版本可被选择：
（1）Runtime Only:更轻量
（2）Runtime+Compiler：

Vue是一个用function实现的类，只能通过new vue去实例化它。
Vue.js的构建打包过程，

数据驱动

vue.js的核心思想是数据驱动，是指视图由数据驱动，对视图的修改不会直接操作DOM，而是修改数据。

Vue 初始化 ：使用new关键字初始化，会调用this._init方法。

function Vue(options){
    .....
	this._init(options);
}

new Vue vue初始化完成了合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化data、props、computed、watcher等。

上述各种初始化完成后，判断vm.$options.el是否存在，存在则调用vm.$mount 方法挂载VM ，将模板渲染成最终的DOM。

Vue实例挂载