對於Vue的例項，比如
const app = new Vue({...})
複製程式碼瀏覽器解析到這段程式碼的時候，自動執行beforeCreate => created => beforeMount => mounted方法，每當data的某個屬性值更改了，比如==app.mes = "hi"==，自動執行beforeUpdate => updated方法。
beforeCreate:
el : undefined
data : undefined
message: undefined
複製程式碼created:
el : undefined
data : [object Object]
message: hi
複製程式碼beforeMount:
el : [object HTMLDivElement]
<div id="app"><p>{{ message }}</p></div>
data : [object Object]
message: hi
複製程式碼mounted:
el : [object HTMLDivElement]
<div id="app"><p>hi</p></div>
data : [object Object]
message: hi
複製程式碼當需要銷燬這個例項的時候，需要手動執行app.$destroy()。然後Vue此時會自動呼叫beforeDestroy、destroyed方法。
一旦元件被銷燬，它將不再響應式，即更改data的屬性值，比如app.mes = "hello"，頁面不會同時被更新，頁面上的資料任然顯示的是 hi
此時需要手動呼叫app.$mount()，這個方法在這個時候被手動呼叫的時候，Vue會自動按照下面的順序執行以下方法： beforeMount => beforeUpdate => updated => mounted。
此時，我們會發現頁面變成了hello 我的理解是，雖然之前app被銷燬了，但是對於mes屬性的dep裡面，通過監控它的watcher，仍然是變成了“hello”，但是不會呼叫底層的compile(this.cb)來渲染檢視。而當手動呼叫app.$mount()的時候，它的compile方法被啟用，又變成響應式的了。 當我們呼叫destroy方法的時候，其實呼叫了app._watcher的teardown方法，下面程式碼所示（在執行這個destroy之前，我們呼叫了callHook這個鉤子函式）:
Vue.prototype.$destroy = function () {
var vm = this;
if (vm._isBeingDestroyed) {
return
}
callHook(vm, 'beforeDestroy');
if (vm._watcher) {
vm._watcher.teardown();
}
var i = vm._watchers.length;
while (i--) {
vm._watchers[i].teardown();
}
}
複製程式碼_watcher的active值被置為false，然後呼叫removeSub將該watcher所依賴的訂閱器全都退訂（從每個dep的subs陣列中移除）。
Watcher.prototype.teardown = function teardown () {
var this$1 = this;
if (this.active) {
// remove self from vm's watcher list
// this is a somewhat expensive operation so we skip it
// if the vm is being destroyed.
if (!this.vm._isBeingDestroyed) {
remove(this.vm._watchers, this);
}
var i = this.deps.length;
while (i--) {
this$1.deps[i].removeSub(this$1);
}
this.active = false;
}
};
複製程式碼看到這裡，我們知道，儘管被destroy，_watcher還是那個_watcher(此時，如果呼叫$mount，就不是了)。什麼意思呢？就是說每個屬性值還是被放在它們各自的watcher中被監控著的。只不過，由於這些watcher都從deps裡面被退訂了，那麼一旦它們的值被更改，將不會呼叫watcher的update（因為每個watcher的update方法是在dep的notify裡面被呼叫的）。
我們看到update被呼叫的時候，實際是呼叫了run方法，也就是說真正的update(this.cb)實在run裡面被呼叫。
在run裡面，先判斷active，如果是false就不更新檢視（不再響應式了）
Watcher.prototype.update = function update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true;
} else if (this.sync) {
this.run();
} else {
queueWatcher(this);
}
};
//
Watcher.prototype.run = function run () {
if (this.active) {
var value = this.get();
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
isObject(value) ||
this.deep
) {
// set new value
var oldValue = this.value;
this.value = value;
/..../
{this.cb.call(this.vm, value, oldValue);
}
}
}
};
複製程式碼好了，當我們再次呼叫app.$mount()，其實我們此時是重新編譯了一遍節點。此時經歷了這麼個過程： beforeMount => beforeUpdate => updated => mounted
檢視原始碼，我們發現$mount方法裡面呼叫了compileToFunctions方法，而compileToFunctions方法裡面呼叫了compile方法，也就是說，此時我們為app.mes屬性，重新new了一個Watcher。
var mount = Vue.prototype.$mount;
Vue.prototype.$mount = function (el,
hydrating){
//.......
var ref = compileToFunctions(template, {
shouldDecodeNewlines: shouldDecodeNewlines,
shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this);
//....
}
//...
function compileToFunctions(){
//....
var compiled = compile(template, options);
//...
}
複製程式碼如果讀者對以上分析感到疑惑，我們可以測試一下：
在呼叫destroy之前，我們先宣告一個變數p來保持對此時的watcher物件的引用(由於jvm是根據對物件的持有，來決定是否從記憶體中刪除此物件。所以這個舊的watcher不會被刪除)
// teardown之前
p=app._watcher.deps[0].subs[0];
// teardown之後，又呼叫$mount()
pp = app._watcher.deps[0].subs[0];
// 比較
p === pp //輸出false，說明這個watcher是新new出來的
複製程式碼