Vue中Watcher有什么用

本篇文章给大家分享的是有关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...     }   }

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

以上就是Vue中Watcher有什么用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。