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有什么用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。