浅尝vue

最新推荐文章于 2022-11-15 10:13:29 发布

飘然离去

最新推荐文章于 2022-11-15 10:13:29 发布

阅读量194

点赞数

分类专栏：点滴-vue-目录

本文链接：https://blog.csdn.net/weixin_42201346/article/details/102766959

版权

点滴-vue-目录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浅尝vue

rollup 与 webpack

umd,esm,commonjs

weex

shared

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

export const LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
]

理一下代码的执行思路哈

// 代码必然从构造函数开始执行的。
<body>
    <div id="app">
        <span>
            {{aa}}
        </span>
    </div>
    <script>
        new Vue({
            data() {
                return {
                    aa: 'aa'
                }
            }
        }).$mount('#app')
    </script>
</body>

【1.寻找Vue constructor阶段】

// 寻找的过程中顺便发现的
Vue.prototype.$mount
Vue.prototype.__patch__ = inBrowser ? patch : noop
initGlobalAPI(Vue) 中---->>>
initUse(Vue)  Vue.use
initMixin(Vue)  Vue.mixin
initExtend(Vue)  Vue.extend
initAssetRegisters(Vue)  Vue[type] 
//  注意这句代码 this.options[type + 's'][id] = definition

【2.prototype预处理阶段】

找到了Vue构造器,但是发现除了上边的预处理，代码还做Vue原型prototype做了很多预处理，这个阶段称为prototype处理阶段

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

prototype处理阶段(1)initMixin

 方法。
  Vue.prototype._init = function () {
 	initLifecycle(vm)
	 initEvents(vm)
	 initRender(vm)
	 callHook(vm, 'beforeCreate')
	 initInjections(vm) // resolve injections before data/props
	 initState(vm)
	 initProvide(vm) // resolve provide after data/props
	 callHook(vm, 'created')
 }

prototype处理阶段(2)stateMixin

Object.defineProperty(Vue.prototype, '$data', dataDef)
Object.defineProperty(Vue.prototype, '$props', propsDef)
Vue.prototype.$set = set
Vue.prototype.$delete = del
Vue.prototype.$watch

prototype处理阶段(3)initRender

Vue.prototype.$on
Vue.prototype.$once
Vue.prototype.$off
Vue.prototype.$emit

prototype处理阶段(4)lifecycleMixin

Vue.prototype._update
Vue.prototype.$forceUpdate
Vue.prototype.$destroy

prototype处理阶段(5)renderMixin

Vue.prototype.$nextTick
Vue.prototype._render

【3.vm处理阶段】

以上是prototype的处理阶段，或者说new Vue之前的处理，那么new Vue之后做了什么，这个阶段可以称为(vm处理阶段)
也就是执行_init方法

vm处理阶段initLifecycle

parent.$children.push(vm)
vm.$parent = parent
vm.$root = parent ? parent.$root : vm
vm.$children = []
vm.$refs = {}

vm处理阶段 initEvents

把父组件绑定的event映射到子组件。
updateListeners

vm处理阶段 initRender

 vm.$slots = resolveSlots(options._renderChildren, renderContext)
 vm.$scopedSlots = emptyObject
 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
 vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

vm处理阶段 initInjections

vm处理阶段 initState

处理 opts.data  (核心observe(data)) 这一块Observer阶段我们稍后详细的看下。
处理 opts.computed
处理 opts.watch

vm处理阶段initProvide

【4.Observer阶段】

vue中我们最关心的是如何实现mvvm的，data和dom是如何进行绑定的。到底对opt.data做了什么？

Observer阶段之new Observer。

// 记录下observer阶段
class Observer{
	this.dep = new Dep()
	def(value, '__ob__', this)
	如果是数组那么...
	如果是其他那么walk...，然后执行defineReactive
}

Observer阶段之数组处理

对数组操作的7个方法进行劫持,先执行这7个方法原本的操作,然后进行this.__ob__.dep.notify()
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

Observer阶段之defineReactive

遍历所有的key进行劫持。
每一个key 都会const dep = new Dep()
通过Object.defineProperty的get进行依赖收集，通过set进行触发更新。

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

其实到这里initState中的Observer阶段就完成了。有人说，我什么都么看到哈？看后边的代码执行$mount

【5.mountComponent阶段】

执行 mountComponent(vm: Component,el: ?Element, hydrating?: boolean)
一个vue组件执行一次mountComponen注册一个watcher
二个vue就会执行两次。

mountComponent () {
	updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
    new Watcher(vm, updateComponent, noop, {
	    before () {
	      if (vm._isMounted && !vm._isDestroyed) {
	        callHook(vm, 'beforeUpdate')
	      }
	    }
	 }, true /* isRenderWatcher */)
	return vm;
}

【6.dom diff和 dom更新阶段】

最终执行vm._update(vnode, hydrating)
dom打补丁,然后更新真实dom

vm._vnode = vnode
// 这里就是进行dom diff 然后打补丁的地方
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

【7.从数据更新到Dom更新过程】

在这里插入图片描述

数据更新后，在更新dom。问题来了: dom事件触发是如何绑定到dom上面的呢？

【8.dom事件触发数据更新过程】

我们发现_update中传入的dom虚拟节点已经是把数据处理过的。
所以从数据到dom的映射过程在_render完成的。
_render调用的是我们的render函数。
render函数通过compileToFunctions生成。compileToFunctions调用createCompiler函数。
三个步骤。parse,optimize,generate.
	const ast = parse(template.trim(), options)
	if (options.optimize !== false) {
		optimize(ast, options)
	}
	const code = generate(ast, options)
	return {
		ast,
		render: code.render,
		staticRenderFns: code.staticRenderFns
	}

这样子编译的过程就把我们的data属性编译到了vNode上边去,并且如果如果触发事件会更新vm的data。
这个过程就不详细说了。

dom diff的过程我们就不说了。

看一下vue 的生命周期哪里执行的。

vue的指令的编译方式。

 ASSET_TYPES.forEach(type => {
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id)
        }
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })


function genDirectives (el: ASTElement, state: CodegenState): string | void {
  const dirs = el.directives
  if (!dirs) return
  let res = 'directives:['
  let hasRuntime = false
  let i, l, dir, needRuntime
  for (i = 0, l = dirs.length; i < l; i++) {
    dir = dirs[i]
    needRuntime = true
    const gen: DirectiveFunction = state.directives[dir.name]
    if (gen) {
      // compile-time directive that manipulates AST.
      // returns true if it also needs a runtime counterpart.
      needRuntime = !!gen(el, dir, state.warn)
    }
    if (needRuntime) {
      hasRuntime = true
      res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
        dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''
      }${
        dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''
      }${
        dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
      }},`
    }
  }
  if (hasRuntime) {
    return res.slice(0, -1) + ']'
  }
}