duuliy

看了些vue源码

2018-3-14

vue2.x
总结:core核心代码里面,6成代码都是为了各种方法服务的,4成用于virtualDom 生命周期等等。。

render渲染:
初始化方法开始找代码,在 src/core/instance/index.js 中,先执行了 renderMixin 方法,然后在Vue实例化的时候执行了 vm._init 方法,在这个 vm._init 方法中执行了 initRender 方法。renderMixin 和 initRender 都在 src/core/instance/render.js 中

1.

export function createTextVNode (val: string | number) {
  return new VNode(undefined, undefined, undefined, String(val))
}

2.

declare type VNodeWithData = {
  tag: string;
  data: VNodeData;
  children: Array;

声明一个对象类的属性类型。。

3.生命周期就是,整个渲染过程的特定的事情执行的方法。
生命周期mount

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

先执行 方法成功或失败 返回v_dom渲染方法。。

4.template解析
a.获取el元素。
b.判断el是否为body或者html。
c.为$options编译render函数。
d.执行之前的mount函数。

5.双向绑定
Object.defineProperty() 方法,监控对数据的操作,从而可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。通过数据劫持结合发布者-订阅者模式的方式来实现
a.实现options参数处理
b.实现observer数据劫持
c.实现Dep订阅器(管理watcher,对调用的data数据进行依赖注入), 当watcher发现变化时,调用dep来更新
d.实现Watcher观察者
e.实现基础的compile编译

//(核心逻辑 获取dom,遍历dom,解析'{{}}','@',v-for等等)

6.Vue.prototype.$on
依次压进数组,然后执行。。

7.Vue.prototype.$once
先执行$off event,然后放在this.的原型链上调用argument。。

8.Vue.prototype.$off
如果fn上面有那么就splice。。

9.Vue.prototype.$emit