国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

實例講解vue源碼架構

來源:懂視網 責編:小采 時間:2020-11-27 22:01:44
文檔

實例講解vue源碼架構

實例講解vue源碼架構:下載 去github上下載Vue https://github.com/vuejs/vue npm install npm run dev 運行起來 rollup + flow vue使用使用rollup打包,flow規范數據類型 rollup可以先用webpack套用,讀起來差不多,時間有限,畢竟只有5分鐘,這個就不用去看roll
推薦度:
導讀實例講解vue源碼架構:下載 去github上下載Vue https://github.com/vuejs/vue npm install npm run dev 運行起來 rollup + flow vue使用使用rollup打包,flow規范數據類型 rollup可以先用webpack套用,讀起來差不多,時間有限,畢竟只有5分鐘,這個就不用去看roll

下載

去github上下載Vue https://github.com/vuejs/vue

npm install 
npm run dev

運行起來

rollup + flow

vue使用使用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 的時候,是執行相應周期,開發者在周期函數里所寫的

Events

initEvents實現了 emit on 等方法,請參考監聽者訂閱者模式,這里不詳解

render
renderMixin函數
添加了 $nextTick _render 原型對象

$nextTick會在dom跟新后立即調用

nextTick(fn, this)是一個自執行函數

_render返回的是node的js數據,還不是dom

做了Vdom

initRender函數
給vm添加了_c和 $createElement用來渲染的方法

state

if (!(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)
 }
}

給數據做監聽

stateMixin函數

添加原型對象

Vue.prototype.$set = set
Vue.prototype.$delete = del

其他

src/compiler 做了編譯處理

core/componetd 做了keep-alive

core/util 封裝了通用方法

core/vdom vdom算法

以上整體架構分析完畢

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

實例講解vue源碼架構

實例講解vue源碼架構:下載 去github上下載Vue https://github.com/vuejs/vue npm install npm run dev 運行起來 rollup + flow vue使用使用rollup打包,flow規范數據類型 rollup可以先用webpack套用,讀起來差不多,時間有限,畢竟只有5分鐘,這個就不用去看roll
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 欧美一区二区三区在线 | 在线欧美日韩制服国产 | 欧美国产在线视频 | 日韩精品欧美亚洲高清有无 | 一区 在线播放 | 高清不卡一区 | 国产精品视频99 | 成人毛片国产a | 麻豆一区二区 | 在线国产一区二区三区 | 亚洲 欧美 日韩 综合 | 国内精品久久久久久中文字幕 | 国产在线视频在线观看 | 亚洲精品99久久久久中文字幕 | 黄色a级毛片 | 久久亚洲国产成人精品性色 | 美女一级毛片免费观看 | 在线视频亚洲 | 夜夜骑日日操 | 欧美日韩国产色 | 午夜欧美在线 | 在线免费观看国产 | 日本精品一区二区三区在线观看 | 国产成人精品免费大全 | 亚洲免费在线观看 | 国产日韩视频 | 亚洲欧美日韩综合在线 | 欧美成人伊人久久综合网 | 欧美中日韩在线 | 国产99久久亚洲综合精品 | 亚洲高清在线观看视频 | 精品国产欧美一区二区五十路 | 日韩欧美色综合 | 亚洲视频一区二区 | 91香蕉福利一区二区三区 | 亚洲国产成人综合精品2020 | 国产一区二区三区在线视频 | 日韩影片在线观看 | 性插网站 | 就爱啪啪网| 欧美另类在线观看 |