JS问题整理与思考--Vue三要素之渲染(vnode,类比snabbdom)

vue中的render方法,借鉴了snabbdom,对比一下vue的_c方法和snabbdom的h方法。

    // render 函数
    with(this){
        return _c(
            'div',
            {attrs:{'id':'app'}},
            [_c('p',[_v(_s(price))])]
        )
    }

    // snabbdom的h方法
    var vnode = h(
        'div#container',
        {on:{click:someFn}},
        [
            h('span',{style:{fontWeight:'bold'}},'文本文本')
        ]
    )

执行过程

  • 1._c返回的是一个vnode
  • 2。render返回的就是vnode
  • 3.调用updateComponent方法时,立即调用vm_update方法,将生成的vnode传入
  • 4.vm._update首先判断prevVnode是否存在,存在就直接patch到dom中
  • 5.不存在就进行diff比较然后替换prevVnode
Vue.prototype._update = function (vnode, hydrating) {
    var prevVnode = vm._vnode;
    vm._vnode = vnode;
    if (!prevVnode) {
        vm.$el = vm.__patch__(
            vm.$el, vnode
        );
    } else {
        vm.$el = vm.__patch__(prevVnode, vnode);
    }
};

updateComponent = function () {
   vm._update(vm._render(), hydrating);
};

render函数和vdom总结

  • 1.undateComponent中实现了vdom的path
  • 2.页面首次渲染,执行updateComponent
  • 3.data中每次修改属性,执行updateComponent

随机浏览