Vue之Watcher源码解析（2）

Vue之Watcher源码解析（2）

接着上节vue Watcher源码的话，继续探讨，目前是这么个过程：

函数大概是这里：

// line-3846

Vue.prototype._render = function() {

// 获取参数

try {

// 死在这儿

vnode = render.call(vm._renderProxy, vm.$createElement);

} catch (e) {

// 报render错误

}

// return empty vnode in case the render function errored out

if (!(vnode instanceof VNode)) {

// 返回空节点

}

// set parent

vnode.parent = _parentVnode;

return vnode

};

然后，在上个月，我卡死在了render.call这个函数上面，因为所有vue实例被设置了proxy代理，所以会跳转到各种奇怪的检测函数中。

过了一个月，我依然看不懂，一点都不想讲，所以先跳过，直接看后面！

这里假设vnode已经返回了，来看看是个啥：

这是一个虚拟节点，由之前字符串化后的DOM树生成，主要包含子节点、上下文、属性、文本、标签名、类型等属性，这些可以直接从键名判断。

得到vnode后，由于这里是根节点，所以不存在_parentVnode，直接返回。

然后到了mountComponent函数：

// line-2374

function mountComponent(vm, el, hydrating) {

vm.$el = el;

// error

callHook(vm, 'beforeMount');

var updateComponent;

/* istanbul ignore if */

if ("development" !== 'production' && config.performance && mark) {

updateComponent = function() {

// 开发者模式下的处理方式

};

} else {

// 重新进入这里

updateComponent = function() {

vm._update(vm._render(), hydrating);

};

}

vm._watcher = new Watcher(vm, updateComponent, noop);

hydrating = false;

// manually mounted instance, call mounted on self

// mounted is called for render-created child components in its inserted hook

if (vm.$vnode == null) {

vm._isMounted = true;

callHook(vm, 'mounted');

}

return vm

}

这样，就带着返回的vode进入了_update函数，开始正式渲染页面。

函数如下：

// line-2374

Vue.prototype._update = function(vnode, hydrating) {

var vm = this;

if (vm._isMounted) {

callHook(vm, 'beforeUpdate');

}

// 保存原属性

var prevEl = vm.$el;

var prevVnode = vm._vnogboNAJAqYde;

var prevActiveInstance = activeInstance;

activeInstance = vm;

vm._vnode = vnode;

// patch

if (!prevVnode) {

// 初始化渲染

vm.$el = vm.__patch__(

vm.$el, vnode, hydrating, false /* removeOnly */ ,

vm.$options._parentElm,

vm.$options._refElm

);

} else {

// 更新

vm.$el = vm.__patch__(prevVnode, vnode);

}

activeInstance = prevActiveInstance;

// update __vue__ reference

if (prevEl) {

prevEl.__vue__ = null;

}

if (vm.$el) {

vm.$el.__vue__ = vm;

}

// if parent is an HOC, update its $el as well

// HOC => High Order Component => 高阶组件

if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {

vm.$parent.$el = vm.$el;

}

// updated hook is called by the scheduler to ensure that children are

// updated in a parent's updated hook.

};

由于是初次渲染，所以会进入第一个条件分支，并调用__patch__函数，传入原生DOM节点、虚拟DOM、false三个参数。

__patch__在加载框架时候已经注入了，见代码：

// line-7526

// install platform patch function

Vue$3.prototype.__patch__ = inBrowser ? patch : noop;

// line-6968

var patch = createPatchFunction({

nodeOps: nodeOps,

modules: modules

});

这里，nodeOps为封装的DOM操作操作方法，modules为属性、指令http://等相关方法。

这个createPatchFunction函数的构造相当于一个模块，里面包含大量的方法，但是最后不是返回一个对象包含内部方法的引用，而是返回一个函数，形式大概如下：

// line-4762

function createPatchFunction() {

// fn1...

// fn2...

return function patch() {

// 调用内部方法fn1,fn2...

http:// }

}

方法比较多，下次再讲，边跑流程边看。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。