Vue 源码阅读笔记

注: 路人读者请移步 => Huang Yi 老师的Vue源码阅读点这里, 我写这一篇笔记更倾向于以自问自答的形式增加一些自己的理解 , 内容包含面试题范围但超出更多.

自己提出的问题自己解决:

1. core/vdom/patch.js setScope如何做到// set scope id attribute for scoped CSS.?
   目前看到了它调用了nodeOps.setStyleScope(vnode.elm, i),即vnode.elm.setAttribute(i, ' ')

1 Vue.util

以Vue.util.extend这个函数为例, 查找顺序为:

• src/platforms/web/entry-runtime-with-compiler.js
import Vue from './runtime/index'
  • src/platforms/web/runtime/index.js
import Vue from 'core/index'
import Vue from './instance/index'
initGlobalAPI(Vue) from import { initGlobalAPI } from './global-api/index'
Vue.util = { warn, extend, mergeOptions, defineReactive } from
    import { warn, extend, nextTick, mergeOptions, defineReactive } from '../util/index'
export * from 'shared/util'

// in shared/util
/**
 * Mix properties into target object.
 */
export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

可以看出这个 extend 函数只支持2个参数, 这也印证了源码中提到的"不要依赖 Vue 的 util 函数因为不稳定" , 实测:

2 Vue 数据绑定

//调用例子: proxy(vm,`_data`,"message")
export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

实现的效果就是访问this.message实际上通过get访问到了vm._data.message,而访问this.message = 'msg'则是通过set访问了this.message.set('msg')即this._data.message = 'msg'
而初始值是在initMixin的initData方法中通过

data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}

来赋予初值

2.2 vm.$mount

入口: initMixin中结尾的时候

if (vm.$options.el) {
      vm.$mount(vm.$options.el) 
}

取得 el 对应的 dom

el = el && query(el)
//&& 和 || ：
//进行布尔值的且和或的运算。当运算到某一个变量就得出最终结果之后，就返回哪个变量。所以上式能返回 dom.
//再举个例子: 1 && undefined === undefined , 1 && {1:2} === {1:2}

为什么 Vue 不允许挂载在html | body上?

因为它是替换对应的节点,如果 html 或 body 被替换的话整个文档就出错了

template

$options 中有 template 的话

• 优先选用