工作之初使用的angularjs框架，從那時開始數據雙向綁定的思想就深深的吸引了我。那是剛入門并沒有深究angularjs實現雙向綁定的原理。所以至今對angularjs也是一知半解。在工作半年左右接觸了vue，開始使用它作為主要的開發框架。使用至今已有兩年多了，期間也對其源碼進行過研究。vue的各種理念也都比較了解。最近有空總結下自己對vue各個知識點的理解。

?vue生命周期示例圖

上圖描述了vue 的生命周期，下面我們根據此圖來詳細了解下vue從初始化到結束都做了些什么。

1. 創生created

?對vue熟悉的人都知道，vue是封裝在vue的函數中的，

function Vue (options) {if (process.env.NODE_ENV !== 'production' &&!(this instanceof Vue)) {warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options)//初始化開始 } 復制代碼

當我new vue時候，此時vue開始他的生命旅程。此時調用init函數，初始化vue的事件，props，methods，data，computed和watch **

2. 掛載mount

?數據初始結束后，如果可以找到el則開始掛載DOM元素。

?開始編譯：此時判斷是否有render函數，如果有就不做處理直接執行mount.call(this, el, hydrating)。如果沒有render函數，則獲取template，template可以是#id、模板字符串、dom元素，如果沒有template，則獲取el以及其子內容作為模板，然后開始編譯模板，編譯完成調用render函數生成DOM元素。現在我們可以看到頁面顯示的內容了。?

3. 更新update

頁面綁定的數據修改后，更新dom結構，即vdom的diff算法。Vue和React在更新dom時，使用的算法相同，都是基于snabbdom。 update中最終要的一環便是數據patch，vue中調用patch方法來分析DOM元素的結構變化。下面簡述下patch流程：

return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {... let isInitialPatch = false const insertedVnodeQueue = []if (isUndef(oldVnode)) { ... } else {// oldValue不是VNode，而是真實的dom元素 const isRealElement = isDef(oldVnode.nodeType)if (!isRealElement && sameVnode(oldVnode, vnode)) {//判斷兩個vnode可不可以復用為一個節點 // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)//執行patchVnode方法 } else {// } invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm } 復制代碼

? vue中的update是vue知識點中比較重要的知識，此生命周期中最重要的是diff算法。由于內容較多這里就不詳述，有興趣的小伙伴可以去了解下[vue源碼分析](https://github.com/liutao/vue2.0-source/blob/master/patch%E2%80%94%E2%80%94diff.md)?

4. 結束destroy

任何事物有始必有終，vue當然也不例外。在vue中destroy用來結束他的生命周期，當離開當前組件時會自動觸發destroy，當然我們也可以手動觸發。?

手動銷毀vue需要注意：destroy會完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器。也就是說他不會刪除頁面的DOM元素。

轉載于:https://juejin.im/post/5b9f15d9e51d450e827b1edb

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue使用总结-生命周期篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。