Vue原始碼分析 一 new Vue

2021-10-05 07:35:30 字數 1053 閱讀 4490

在我們的vue專案裡,主入口檔案main.js,會有new vue

import vue from 'vue'

...new vue( from './init'

...function vue (options)

this._init(options) // 呼叫初始化方法

}initmixin(vue) // 在vue原型上掛載_init方法

...export default vue

在vue/src/core/instance/init.js裡,可以看到_init方法,在此方法會做合併配置options,初始化生命週期、事件中心、渲染、data、props、computed、watcher等,最後判斷配置裡的el是否有值,並通過vue原型上的$mount方法進行例項掛載。

export function initmixin (vue: class)  else ,vm)

}/* istanbul ignore else */

if (process.env.node_env !== 'production') else

// expose real self

vm._self = vm

initlifecycle(vm) // 初始化生命週期

initevents(vm) // 初始化事件中心

initrender(vm) // 初始化渲染

callhook(vm, 'beforecreate')

initinjections(vm) // resolve injections before data/props

initstate(vm) // 初始化 data、props、computed、watcher

initprovide(vm) // resolve provide after data/props

callhook(vm, 'created')

...

if (vm.$options.el)

}}

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...