摘要:下載去上下載運行起來使用使用打包,規范數據類型可以先用套用,讀起來差不多,時間有限,畢竟只有分鐘,這個就不用去看文檔了入口打開我們看配置找到打開根據配置的不同會選擇不同的同時在這里配置了環境有,,關于引入類型的還有
下載
去github上下載Vue
npm install npm run dev
運行起來
rollup + flowvue使用使用rollup打包,flow規范數據類型
rollup可以先用webpack套用,讀起來差不多,時間有限,畢竟只有5分鐘,這個就不用去看rollup文檔了
入口打開package.json
我們看scripts配置
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev", "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
找到scripts/config.js
打開
根據配置TARGET的不同會選擇不同的config
同時在這里配置了process.env.NODE_ENV 環境
TARGET有CommonJS,ES Modules,UMD關于js引入類型的
還有weex,ssr
"web-runtime-cjs-dev": { entry: resolve("web/entry-runtime.js"), dest: resolve("dist/vue.runtime.common.dev.js"), format: "cjs", env: "development", banner }
在alias.js下設置了別名路徑
我們先介紹src/platforms
里面有web和weex 分別的web和weex入口
在web文件下是CommonJS,ES Modules,UMD關于js引入類型,server的打包入口
打開web/entry-runtime.js
引入
import Vue from "./runtime/index" export default Vue
打開./runtime/index
import Vue from "core/index" Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && inBrowser ? query(el) : undefined return mountComponent(this, el, hydrating) } export default Vue
在vue原型上添加了mount方法
處理了devtools,沒有安裝提醒安裝devtools
給了這句提示dev環境提示
You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
platforms目錄夾講解完畢
core目錄打開core/instance/index
映入眼前的是
function Vue (options) { if (process.env.NODE_ENV !== "production" && !(this instanceof Vue) ) { warn("Vue is a constructor and should be called with the `new` keyword") } this._init(options) } initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue) export default Vue
先執行的是initMixin(Vue)
打開init
export function initMixin (Vue) { Vue.prototype._init = function (options?: Object) { const vm = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== "production" && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // 處理傳入的options // merge options if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { // 傳入的options,默認的options一起合并掛載到vm.$options上 vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== "production") { // 代理 initProxy(vm) } else { vm._renderProxy = vm } // 生命周期 initLifecycle(vm) // emit on 事件 initEvents(vm) // 處理render vdom initRender(vm) callHook(vm, "beforeCreate") // 處理Injections initInjections(vm) // resolve injections before data/props // 雙向數據綁定,監聽訂閱 initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, "created") /* istanbul ignore if */ if (process.env.NODE_ENV !== "production" && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } // 渲染到dom if (vm.$options.el) { vm.$mount(vm.$options.el) } } }lifecycle
打開 lifecycle
export function callHook (vm: Component, hook: string) { // disable dep collection when invoking lifecycle hooks pushTarget() //執行對象的周期函數,周期函數最后被處理成數組 const handlers = vm.$options[hook] const info = `${hook} hook` if (handlers) { for (let i = 0, j = handlers.length; i < j; i++) { invokeWithErrorHandling(handlers[i], vm, null, vm, info) } } if (vm._hasHookEvent) { vm.$emit("hook:" + hook) } popTarget()
callHook 的時候,是執行相應周期,開發者在周期函數里所寫的
EventsinitEvents實現了 emit on 等方法,請參考監聽者訂閱者模式,這里不詳解
render renderMixin函數添加了 $nextTick _render 原型對象
$nextTick會在dom跟新后立即調用
nextTick(fn, this)是一個自執行函數
_render返回的是node的js數據,還不是dom
做了Vdom
initRender函數給vm添加了_c和 $createElement用來渲染的方法
stateif (!(key in vm)) { proxy(vm, `_props`, key) }
給vue屬性做代理,訪問this.a可以得到this.data.a 的值
export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data) { initData(vm) } else { observe(vm._data = {}, true /* asRootData */) } if (opts.computed) initComputed(vm, opts.computed) if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) } }
給數據做監聽
添加原型對象
Vue.prototype.$set = set Vue.prototype.$delete = del其他
src/compiler 做了編譯處理
core/componetd 做了keep-alive
core/util 封裝了通用方法
core/vdom vdom算法
以上整體架構分析完畢
附張圖
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101358.html
摘要:可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行,可以寫成可以寫成看到這個畫面,安裝完成了。 初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。 什么是 CLI 命令行界面(英語:command-li...
摘要:可以使用或來安裝我用來重新嘗試一次對速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行,可以寫成可以寫成看到這個畫面,安裝完成了。 初步搭建腳手架 Tips 任何不錯的開源項目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項目骨架再在之基礎上進行個人修改。 什么是 CLI 命令行界面(英語:command-li...
摘要:更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的 更多資源請Star:https://github.com/maidishike... 文章轉自:https://github.com/jsfr...
閱讀 3717·2021-10-11 10:59
閱讀 1301·2019-08-30 15:44
閱讀 3479·2019-08-29 16:39
閱讀 2888·2019-08-29 16:29
閱讀 1800·2019-08-29 15:24
閱讀 808·2019-08-29 15:05
閱讀 1264·2019-08-29 12:34
閱讀 2302·2019-08-29 12:19