技術標籤：vue原始碼學習

vue原始碼版本為2.6.11（cdn地址為：https://lib.baomitu.com/vue/2.6.11/vue.js）

vm.$forceUpdate

如何實現的？

只需要執行watcher的update方法，就可以讓例項重新渲染。

Vue.js的每一個例項都有一個watcher。當狀態發生改變時，會通知到元件級別，然後元件內部使用虛擬DOM進行更詳細的重新渲染操作。事實上，元件就是Vue.js例項，所以元件級別的watcher和Vue.js 例項上的watcher說的是同一個watcher.

實現程式碼如下：

Vue.prototype.$forceUpdate = function () {    
    var vm = this;
    if (vm._watcher) {
        vm._watcher.update();
    }
};
 

vm._watcher就是Vue.js例項的watcher,每當元件依賴的資料傳送變化時，都會自動觸發Vue,js例項中_watcher的update方法。

重新渲染的實現原理不難，Vue.js得自動渲染是通過變換偵測來偵測資料，即當資料發生變化時，Vue,js例項重新渲染。而vm.$$forceUpdate是手動通知Vue.js例項重新渲染。