Vue之Watcher源码解析（2）
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了Vue源码之Watcher的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
接着上节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._vnode;
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为属性、指令等相关方法。
这个createPatchFunction函数的构造相当于一个模块，里面包含大量的方法，但是最后不是返回一个对象包含内部方法的引用，而是返回一个函数，形式大概如下：
// line-4762
function createPatchFunction() {
// fn1...
// fn2...
return function patch() {
// 调用内部方法fn1,fn2...
}
}
方法比较多，下次再讲，边跑流程边看。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。