holocc / blog Goto Github PK

function render() {
  with(this) {
    return _c('div', {
      attrs: {
        "a": "1"
      }
    }, [_c('child')], 1)
  }
}

// core/vdom/create-element.js
export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
	if (typeof tag === 'string') {
    let Ctor
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
			// core/vdom/create-component.js
      vnode = createComponent(Ctor, data, context, children, tag)
    }
  }
}

vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )

vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children }, // componentOptions 选项
    asyncFactory
  )

// src/vdom/create-component.js
function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
	data = data || {}
	// 利用 options.props 选项，从 data 中提取 propsData
	const propsData = extractPropsFromVNodeData(data, Ctor, tag)
	
	// 从 data.on 中提取父节点传递的 listeners，事件监听器
	// 对于组件来说，@click 并不是原生事件，而是通过 $on $emit API 模拟的事件
  const listeners = data.on
	// 组件中，native 事件会在组件根元素上监听一个原生事件
  data.on = data.nativeOn

	// data.hook = {}
	// 在 hook 中增加 componentVNodeHooks
  // 增加 init，prepatch，insert，destroy 钩子，在不同的时机中会被调用
	installComponentHooks(data)
}

if (isUndef(oldVnode)) {
      createElm(vnode, insertedVnodeQueue)
    } else {
      if (sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
		}
}

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
    let i = vnode.data
    if (isDef(i)) {
      const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
      // 1. 调用 vnode 过程中安装的 componentHooks
      if (isDef(i = i.hook) && isDef(i = i.init)) {
        i(vnode, false /* hydrating */)
      }
			
      // 2. 初始化组件，插入到 DOM 中
      if (isDef(vnode.componentInstance)) {
        initComponent(vnode, insertedVnodeQueue)
        insert(parentElm, vnode.elm, refElm)
        if (isTrue(isReactivated)) {
          reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
        }
        return true
      }
    }
  }

function createComponentInstanceForVnode (
  vnode: any, // we know it's MountedComponentVNode but flow doesn't
  parent: any, // activeInstance in lifecycle state
): Component {
  debugger
  const options: InternalComponentOptions = {
    _isComponent: true,
    _parentVnode: vnode,
    parent
  }
	
  // 使用 Ctor 构造函数创建一个 vue 实例
  // 组件原本的 options 存到 Ctor.constructor 中
  // 等同于 new Vue() 
  // 由于是组件，通过 _isComponent 选项，走不同的 init 过程
  return new vnode.componentOptions.Ctor(options)
}

Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    vm._isVue = true
    if (options && options._isComponent) {
      initInternalComponent(vm, options)
    }
}

function initInternalComponent (vm: Component, options: InternalComponentOptions) {
  
  const opts = vm.$options = Object.create(vm.constructor.options)
  // doing this because it's faster than dynamic enumeration.
  const parentVnode = options._parentVnode
  opts.parent = options.parent
  opts._parentVnode = parentVnode

  const vnodeComponentOptions = parentVnode.componentOptions
  opts.propsData = vnodeComponentOptions.propsData
  opts._parentListeners = vnodeComponentOptions.listeners
  opts._renderChildren = vnodeComponentOptions.children
  opts._componentTag = vnodeComponentOptions.tag

  if (options.render) {
    opts.render = options.render
    opts.staticRenderFns = options.staticRenderFns
  }
}

// code returned from the main loader for 'source.vue'

// import the <template> block
import render from 'source.vue?vue&type=template'
// import the <script> block
import script from 'source.vue?vue&type=script'
export * from 'source.vue?vue&type=script'
// import <style> blocks
import 'source.vue?vue&type=style&index=1'

script.render = render
export default script	

// import the <template> block
import render from 'source.vue?vue&type=template'
// import the <script> block
import script from 'source.vue?vue&type=script'
export * from 'source.vue?vue&type=script'
// import <style> blocks
import 'source.vue?vue&type=style&index=1'

'-!../lib/loaders/templateLoader.js??vue-loader-options!../node_modules/[email protected]@pug-plain-loader/index.js!../lib/index.js??vue-loader-options!./source.vue?vue&type=template&id=27e4e96e&scoped=true&lang=pug&'

  const id = hash(
    isProduction
      ? (shortFilePath + '\n' + source)
      : shortFilePath
  )

Vue({
	render: ...,
	_scopeId: 'data-v-xxxxxx'
})

new Vue({
    render: h => h(App)
})

Vue.component('test', {
    template: `
      <span>
        <header>
          <slot name="default"></slot>
        </header>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </span> 
    `
  })

  new Vue({
    el: '#app',
    template: `
      <test>
        <template v-slot:header>
          <h1>Here might be a page title</h1>
        </template>
        <template v-slot:footer>
          <p>Here's some contact info</p>
        </template>
      </test>
    `
  })

Vue.component('current-user', {
    template: `
      <span>
        {{ user }}
        <slot v-bind:user="user"></slot> // 子组件传递数据
      </span> 
    `,
    data () {
      return {
        user: 'jiangkunhe'
      }
    }
  })

  new Vue({
    el: '#app',
    template: `
      <current-user>
        <template v-slot="slotProps"> //父组件使用子组件的数据
          {{ slotProps }}
        </template> 
      </current-user>
    `
  })

new Vue({
    el: '#app',
    render (createElement) {
      return createElement('div', {
        on: {
          click: this.handleClick
        }
      }, [
        'helloworld'
      ])
    },
    methods: {
      handleClick () {
        console.log('handleClick run')
      }
    }
  })

<script>
export default {
  render (h) {
    return (
      <span>
        { this.a } 
      </span>
    )
  },
  data() {
    return {
      a: 'fsjdkfjsdkl'
    }
  },
}
</script>

// app.js
import react
console.log('app.js')

// util.js
export function foo() {
	console.log('util.js')
}

// webpack.config.js
const webpack = require('webpack')
const path = require('path')
module.exports = {
  entry: {
    app: './app',
    // vendor 这个 Chunk 只包含了 react，而 app.js 中也同样使用了 react ，因此插件可以从中抽取出
    // 公共的部分， 也就是 react
    vendor: ['react']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(module){
        return module.context && module.context.includes('node_modules');
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
  ],
};	

// vendor.js
// 打开 vendor.js 两次打包中，id 发生了变化，导致 hash 改变
webpackJsonP([id1], [(function() {...}, ...)], [id2]) 

new webpack.HashedModuleIdsPlugin()

// webpack.config.js
module.exports = {
	// ...
  optimization: {
    runtimeChunk: 'single',
    moduleIds: 'hashed',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

beforeCreate () {
  if (isDef(this.$options.router)) {
    // options 中传递了 router 选项，设置 _routerRoot 为自己
    this._routerRoot = this
    this._router = this.$options.router
    this._router.init(this)
    Vue.util.defineReactive(this, '_route', this._router.history.current)
  } else {
    // 取父组件的 _routerRoot
    this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
  }
}

// _route 是一个 Route 对象
declare type Route = {
  path: string;
  name: ?string;
  hash: string;
  query: Dictionary<string>;
  params: Dictionary<string>;
  fullPath: string;
  matched: Array<RouteRecord>; // 根据当前路由路径匹配的 RouteRecord 数组
  redirectedFrom?: string;
  meta?: any;
}

declare type RouteRecord = {
  path: string;
  regex: RouteRegExp; // path-to-regexp 生成的正则
  components: Dictionary<any>; // 对应我们编写 VueRouter 中传的组件
  instances: Dictionary<any>;
  name: ?string;
  parent: ?RouteRecord;
  redirect: ?RedirectOption;
  matchAs: ?string;
  beforeEnter: ?NavigationGuard;
  meta: any;
  props: boolean | Object | Function | Dictionary<boolean | Object | Function>;
}

export const supportsPushState =
  inBrowser &&
  (function () {
    const ua = window.navigator.userAgent

    if (
      (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
      ua.indexOf('Mobile Safari') !== -1 &&
      ua.indexOf('Chrome') === -1 &&
      ua.indexOf('Windows Phone') === -1
    ) {
      return false
    }

    return window.history && typeof window.history.pushState === 'function'
  })()

// 如果当前环境支持 Histroy API 就会使用 History API 进行模拟
const eventType = supportsPushState ? 'popstate' : 'hashchange'
window.addEventListener(
  eventType,
  handleRoutingEvent
)

confirmTransition (route: Route, onComplete: Function, onAbort?: Function) {
    const current = this.current
    // 相同的路由不会继续执行逻辑
    if (
      isSameRoute(route, current) &&
      // in the case the route map has been dynamically appended to
      route.matched.length === current.matched.length
    ) {
      this.ensureURL()
      return abort(createNavigationDuplicatedError(current, route))
    }

declare type RouteRecord = {
  path: string;
  regex: RouteRegExp;
  components: Dictionary<any>; // 对应我们编写 VueRouter 中传的组件
}

let vue = new Vue({
    el: '#app',
    template: `
      <div @click="handleClick('abcd')"></div> 
    `,
    methods: {
      handleClick (a) {
        console.log(a)
      }
    }
})

export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}	

// 生成的 AST 对象
{
  attrsMap: { @click: "handleClick('abcd')"},
  events: {
    'click': {
      value: "handleClick('abcd')",
    }
  }
}

// render 字符串
with(this){return _c('div',{on:{"click":function($event){return handleClick('abcd')}}},[_v("fjskdflds")])}

export function updateListeners (
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  createOnceHandler: Function,
  vm: Component
) {}

// 最终的 vnode
{
	tag: 'div',
	data: {
		on: {
			click: function invoker() {}
		}
	},
}

Vue.component('child', {
    template: '<div>child</div>'
})
let vue = new Vue({
    el: '#app',
    template: `
      <child @click="handleClick('abcd')"></child> 
    `,
    methods: {
      handleClick (a) {
        console.log(a)
      }
    }
})

function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) {
  if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
    return
  }
  const on = vnode.data.on || {}
  const oldOn = oldVnode.data.on || {}
  target = vnode.elm
  normalizeEvents(on)
  updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context)
  target = undefined
}

vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)

class Store {
  constructor (options = {}) {
    if (!Vue && typeof window !== 'undefined' && window.Vue) {
      install(window.Vue)
    }
    
    this._modules = new ModuleCollection(options)
    
    installModule(this, state, [], this._modules.root)
    
    resetStoreVM(this, state)
  }
}

export default function (Vue) {
  const version = Number(Vue.version.split('.')[0])
  Vue.mixin({ beforeCreate: vuexInit })  

  function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
}

const store = new Vuex.Store({ ...options })

const store = new Vuex.Store({
  // 拥有子模块 a 和 b
  modules: {
    a: moduleA,
    b: moduleB
  }
})

function installModule (store, rootState, path, module, hot) {
  const isRoot = !path.length
  const namespace = store._modules.getNamespace(path)

  // register in namespace map
  if (module.namespaced) {
    store._modulesNamespaceMap[namespace] = module
  }

  // set state
  if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1))
    const moduleName = path[path.length - 1]
    store._withCommit(() => {
      Vue.set(parentState, moduleName, module.state)
    })
  }

  const local = module.context = makeLocalContext(store, namespace, path)

  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  module.forEachAction((action, key) => {
    const type = action.root ? key : namespace + key
    const handler = action.handler || action
    registerAction(store, type, handler, local)
  })

  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key
    registerGetter(store, namespacedType, getter, local)
  })

  module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot)
  })
}

const store = new Vuex.Store({
  modules: {
    a: moduleA, // path = ['a']
    b: {
      modules: {
        namespced: true
        c: moduleC  // path = ['b', 'c']
      }
    }
  }
})

getNamespace (path) {
    let module = this.root
    return path.reduce((namespace, key) => {
      module = module.getChild(key)
      // 有命名空间的情况， 比如命名为 a， 最后的 namespace 为  a/ 
      // 最后有斜杠，因为还要追加 mutations actions 的 key 值
      return namespace + (module.namespaced ? key + '/' : '')
    }, '')
  }

function resetStoreVM (store, state, hot) {
  // bind store public getters
  store.getters = {}
  // reset local getters cache
  store._makeLocalGettersCache = Object.create(null)
  const wrappedGetters = store._wrappedGetters
  const computed = {}
  forEachValue(wrappedGetters, (fn, key) => {
    // use computed to leverage its lazy-caching mechanism
    // direct inline function use will lead to closure preserving oldVm.
    // using partial to return function with only arguments preserved in closure environment.
    computed[key] = partial(fn, store)
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key],
      enumerable: true // for local getters
    })
  })

  // use a Vue instance to store the state tree
  // suppress warnings just in case the user has added
  // some funky global mixins
  const silent = Vue.config.silent
  Vue.config.silent = true
  store._vm = new Vue({
    data: {
      $$state: state
    },
    computed
  })
  Vue.config.silent = silent

  // enable strict mode for new vm
  if (store.strict) {
    enableStrictMode(store)
  }

}

function enableStrictMode (store) {
  store._vm.$watch(function () { return this._data.$$state }, () => {
    if (process.env.NODE_ENV !== 'production') {
      assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
    }
  }, { deep: true, sync: true })
}	

function _withCommit (fn) {
    const committing = this._committing
    this._committing = true
    fn()
    this._committing = committing
  }