生命周期圖：

Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

update生命周期分解：

源碼：

最開始用戶new Vue()創建實例

function Vue (options) {...this._init(options)... }

初始化方法：

Vue.prototype._init = function (options) {// 合并optionsvm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)...// 開始一系列的初始化initLifecycle(vm) // 初始化生命周期 主要是給vm對象添加了$parent、$root、$children、$refs屬性,以及一些其它的生命周期相關的標識initEvents(vm) // 初始化事件initRender(vm) // 初始化render函數 這里給vm添加了一些虛擬dom、slot等相關的屬性和方法callHook(vm, 'beforeCreate') // 執行 beforeCreate 鉤子// resolve injections before data/props 與provide/inject有關initInjections(vm) initState(vm) // 初始化Props,Methods,data,computed,watch// resolve provide after data/props 與provide/inject有關initProvide(vm)callHook(vm, 'created') // 執行 created 鉤子...if (vm.$options.el) {vm.$mount(vm.$options.el) // 調用mount方法,模板掛載} }

mount 方法：

Vue.prototype.$mount = function (el?: string | Element,hydrating?: boolean ): Component {el = el && query(el) // 如果el是string，query 可以理解成document.querySelectorconst options = this.$options// resolve template/el and convert to render functionif (!options.render) { // 判斷是否有render函數// 沒有render函數，獲取template，template可以是#id、模板字符串、dom元素，如果沒有template，則獲取el以及其子內容作為模板let template = options.templateif (template) {if (typeof template === 'string') {if (template.charAt(0) === '#') {template = idToTemplate(template)/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && !template) {warn(`Template element not found or is empty: ${options.template}`,this)}}} else if (template.nodeType) {template = template.innerHTML} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this)}return this}} else if (el) {template = getOuterHTML(el)}if (template) {const { render, staticRenderFns } = compileToFunctions(template, { // 對我們最后生成的模板進行解析，生成rendershouldDecodeNewlines,delimiters: options.delimiters}, this)options.render = renderoptions.staticRenderFns = staticRenderFns}}return mount.call(this, el, hydrating) } 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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