这篇文章主要为大家详细介绍了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)<a style="color:transparent">来@源gao*daima.com搞@代#码网</a> { 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... } }
方法比较多，下次再讲，边跑流程边看。
以上就是Vue之Watcher源码解析（2）的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue之Watcher源码解析（2）
转载请注明原文链接：Vue之Watcher源码解析（2）
