Vue 原始碼分析 建構函式原型

2022-05-05 20:54:11 字數 632 閱讀 2609

在執行 npm run dev 的時候 根據

script/config.js

檔案中的配置

'web-full-dev': ,    

banner }

可知入口檔案為 'web/entry-runtime-with-compiler.js',最終輸出為

'dist/vue.js',

有乙個umd 模組

,模組的型別總共有(iife amd cmd cjs umd es6)

在script 檔案下的 alias.js 是別名配置檔案。

module.exports =

例如:web: resolve('src/platforms/web')  web 指向

'src/platforms/web'

路徑開啟  src/platforms/web/entry-runtime-with-compiler.js

會發現  import vue from './runtime/index'  這個檔案的

vue  

是從'./runtime/index' 匯入來的,接下來開啟

runtime

目錄下的

index.js

Vue原始碼分析

在開始原始碼分析工作之前,我們在當前篇章做好相應的準備工作,以便更好地展開分析。將原始碼fork到自己的github倉庫中 git clone 自己的github vue 位址 dist 打包之後的結果 examples 示例 src compiler 編譯相關 core vue 核心庫 compo...

Vue原始碼分析(流程分析)

使用步驟 1.編寫 頁面 模板 1.直接在html標籤中寫 2.使用template 3.使用單檔案 2.建立vue例項 1.在vue 的建構函式中 data,methods,computer,watcher,props,3.將vue掛載到頁面中 mount 資料驅動模型 vue執行流程 1.獲得模...

vue原始碼分析1

在vue的原始碼中使用的是es5的方法 prototype.slice.bind obj 來實現的 例如 已 為例 obj 定義屬性的物件 prop 定義或修改屬性的名稱 descriptor 將被定義或修改的屬性描述符 value 預設值 configurable 是否可以重新定義 enumera...