[源码篇] 源码涉及点

源码执行步骤

new Vue(options)
  => this._init(options)
    =>mergeOptions
    =>initLifecycle(vm)
    =>initEvents(vm)
    =>initRender(vm)
    =>callHook(vm, 'beforeCreate')
    =>initInjections(vm)
    =>initState(vm) =>
       => initProps()
       => initMethod() // 将method 挂载到 vm 上
       => initData() => observe(data, true) // 数据代理
       => initComputed()
       => initWatch()
    => vm.$mount(vm.$options.el) // 🌟🌟🌟🌟
    => Vue.prototype.$mount 「src/platforms/web/entry-runtime-with-compiler.js」
      => { render, staticRenderFns } = compileToFunctions(template, ...)
        => { compile, compileToFunctions } = createCompiler(baseOptions)
      	  => parse(template, options)
      	  => optimize(ast, options)
      	  => {render, staticRenderFns} = generate(ast, options)
      		  => code = genElement(ast, state) // code demo: _c('div',{attrs:{"id":"app"}},[_c('p',{on:{"click":show}},[_v(_s(text))])])
      			  => genData
      				  => data += `${genHandlers(el.events, false, state.warn)},`
    => mount.call()
    	=> Vue.prototype.$mount 「src/platforms/web/runtime/index.js」
    	=> mountComponent
    		=> updateComponent = function() { vm._update(vm._render(), hydrating) }
    		=> new Watcher(vm, updateComponent)
    			=> this.getter = updateComponent
    	      => this.get()
    			  => pushTarget
    			  => value = this.getter.call(vm, vm)
              => vm._update(vm._render(), hydrating)
              => vm._update(Vue.prototype._render())
              => Vue.prototype._update(Vue.prototype._render()) 「src/core/instance/lifecycle.js」
              => vm.__patch__

Vanilla JavaScript

1. delegate 事件委托
   1. e.target <=> e.currentTarget
   2. typeof e.target
   3. element.webkitMatchesSelector
   4. 递归添加处理函数
2. DOM 操作
   1. childNodes
   2. nodeType

Vue.js

1. @click.native 与 @click
2. v-if 与 v-show
3. keep-alive
   1. keep-alive 在首页和detail页面的具体应用

       // 需要注意的是: 如果要匹配多个路径，include 传入为正则对象，不可是字符串
       // include 正则匹配的是组件的名称，不是路由的名称。
        <keep-alive :include=/xxx$/>
            <router-view></router-view>
        </keep-alive>
   

   2. 疑问：缓存到 cache 中的是 vnode 还是 真是的 dom 节点呢？如果是vdom，回退的时候，为何页面可以保持之前的状态，比如图标也是保持之前的形状呢？

ES6

1. import 命令的提升效果，优先执行。在调试 vue 单文件的时候，console.log 打点如果在 import 前面，注意：console 会在 import 执行之后执行。