本系列文章都是vue版本2.6.11，也就是vuecli3的對應的vue的版本

學習一門技術的源碼首先當然是從它的入口開始學習，在這里我先擴展一下從引入vue到入口都講一下

首先看下node_modules下面有很多個不同版本的vue的源碼文件那么到底用的是哪個呢

具體哪個包做什么用vue的官方有說明，現在我們關注的是引入那一部分

我們知道現在我們都是用es6module的引入方式引入一個庫，那么nodeJs在編譯過程中他是怎么處理我們這一語法糖的呢。

nodeJs是支持es6module和commonJs編碼規范的，nodeJs首先會找node_modules每個引入模塊（核心模塊除外 核心模塊被編譯成二進制文件在.bin目錄下）的package.json文件,packagejson的main和module對應著兩種加載方式，es6module引入會直接找module字段對應的文件路徑，如果沒有就找main的。module字段引入也是為了做treeshaking

1,vue入口初始化

1）綁定原型

1、綁定對象$data,$props,事件，更新、銷毀函數到Vue原型

2、初始化入口方法_init

2）初始Vue全局對象

綁定全局對象到Vue對象，將全局的函數綁定到Vue的構造函數

3)實例化Vue

實例化Vue后調用_init方法初始實例vm

它會先判斷是否為組件，如果是組件就會初始化組件的數據

然后就是一些周期函數，state的初始化了,initState將組件中的data,props,computed,watch,methods添加數據監聽到vm實例中后續章節會特意講如何監聽的

到此為止是Vue初始化前提工作都已經準備完畢，我們在第二節Vue如何掛載到我們的真實Dom上面的

總結

以上是生活随笔為你收集整理的vue 初始化方法_Vue源码解读（一）引入Vue做了什么的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。