亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

實例講解vue源碼架構

 更新時間:2019年01月24日 14:28:36   投稿:laozhang  
在本篇文章中小編給大家分享了關于vue源碼架構的相關知識點內容,有需要的朋友們學習下。

下載

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

npm install 
npm run dev

運行起來

rollup + flow

vue使用使用rollup打包,flow規(guī)范數(shù)據(jù)類型

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

打開

根據(jù)配置TARGET的不同會選擇不同的config

同時在這里配置了process.env.NODE_ENV 環(huán)境

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環(huán)境提示

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

先執(zhí)行的是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
  // 雙向數(shù)據(jù)綁定,監(jiān)聽訂閱
  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()
 //執(zhí)行對象的周期函數(shù),周期函數(shù)最后被處理成數(shù)組
 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 的時候,是執(zhí)行相應周期,開發(fā)者在周期函數(shù)里所寫的

Events

initEvents實現(xiàn)了 emit on 等方法,請參考監(jiān)聽者訂閱者模式,這里不詳解

render
renderMixin函數(shù)
添加了 $nextTick _render 原型對象

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

nextTick(fn, this)是一個自執(zhí)行函數(shù)

_render返回的是node的js數(shù)據(jù),還不是dom

做了Vdom

initRender函數(shù)
給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)
 }
}

給數(shù)據(jù)做監(jiān)聽

stateMixin函數(shù)

添加原型對象

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

其他

src/compiler 做了編譯處理

core/componetd 做了keep-alive

core/util 封裝了通用方法

core/vdom vdom算法

以上整體架構分析完畢

相關文章

  • Vue源碼學習之初始化模塊init.js解析

    Vue源碼學習之初始化模塊init.js解析

    本篇文章主要介紹了Vue源碼學習之初始化模塊init.js解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題(推薦)

    Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題(推薦)

    這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調用多次數(shù)據(jù)的問題,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • Vue?mergeProps用法詳細講解

    Vue?mergeProps用法詳細講解

    這篇文章主要介紹了Vue?mergeProps用法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧
    2022-10-10
  • Element-Plus之el-col與el-row快速布局

    Element-Plus之el-col與el-row快速布局

    el-col是el-row的子元素,下面這篇文章主要給大家介紹了關于Element-Plus之el-col與el-row快速布局的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • Vue3.0 手寫放大鏡效果

    Vue3.0 手寫放大鏡效果

    放大鏡在很多購物網(wǎng)站都可以看的到,本文主要實現(xiàn) 固定放大兩倍,鼠標進入到左側圖片區(qū)域的時候,遮罩層顯示,離開時,遮罩層隱藏,感興趣的可以了解一下
    2021-07-07
  • Vue中進行數(shù)據(jù)緩存的使用示例

    Vue中進行數(shù)據(jù)緩存的使用示例

    數(shù)據(jù)緩存可以提高應用程序的性能,減少網(wǎng)絡請求,提高用戶體驗,在本文中,我們介紹了Vue中如何進行數(shù)據(jù)緩存,并提供了一些示例代碼,具有一定的參考價值,感興趣的可以了解一下
    2023-09-09
  • vue+iview實現(xiàn)分頁及查詢功能

    vue+iview實現(xiàn)分頁及查詢功能

    這篇文章主要為大家詳細介紹了vue+iview實現(xiàn)分頁及查詢功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • vue2.0中goods選購欄滾動算法的實現(xiàn)代碼

    vue2.0中goods選購欄滾動算法的實現(xiàn)代碼

    這篇文章主要介紹了vue2.0中goods選購欄滾動算法的實現(xiàn)代碼,需要的朋友可以參考下
    2017-05-05
  • vue vant Area組件使用詳解

    vue vant Area組件使用詳解

    這篇文章主要介紹了vue vant Area組件使用詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • vue如何實現(xiàn)二進制流文件導出excel

    vue如何實現(xiàn)二進制流文件導出excel

    這篇文章主要介紹了vue如何實現(xiàn)二進制流文件導出excel,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06

最新評論