new Vue 發生了什麼

2021-10-11 03:58:57 字數 2431 閱讀 6163

合併options

初始化生命週期

初始化事件

初始化渲染

觸發beforecreate鉤子

export function initstate (vm: component)

else

,true

/* asrootdata */)}

if(opts.computed)

initcomputed

(vm, opts.computed)

if(opts.watch && opts.watch !== nativewatch)

}

觸發created鉤子

function

vue(options)

initmixin

(vue)

function

initmixin

(vue)

initstate

(vm)

if(vm.$options.el)

}const inbrowser =

typeof window !==

'undefined'

vue.prototype.

$mount

=function

(el, hydrating)

function

mountcomponent

(vm, el, hydrating)

}// 快取之前的$mount

const mount = vue.prototype.$mount

vue.prototype.

$mount

=function

(el, hydrating)

else

}return mount.

call

(this

, el, hydrating)

}function

query

(el)

return selected

}else

}function

getouterhtml

(el)

else

}function

initstate

(vm)

else

,true)}

}function

initdata

(vm)

const keys = object.

keys

(data)

let i = keys.length

while

(i--

)observe

(data,

true

/* asrootdata */)}

function

getdata

(data, vm)

const sharedpropertydefinition =

// 等待,無操作

function

noop()

function

proxy

(target, sourcekey, key)

sharedpropertydefinition.

set=

function

proxysetter

(val)

object.

defineproperty

(target, key, sharedpropertydefinition)

}function

observe

(value, asrootdata)

js物件描述真實dom

手動操作dom比較麻煩,還要考慮相容性問題,雖然有jquery等庫簡化操作,但隨著專案增大,複雜度不斷提公升

為了簡化操作dom,可以使用模板引擎,但是模板引擎沒有解決跟蹤狀態變化的問題,於是vdom出現了

vue中,可以用$on$once去監聽所有的生命週期鉤子函式,如監聽元件的updated鉤子函式可以寫成this.$on('hook:updated', () => {})

mounted()

)}

需要監聽第三方元件資料的變化,但是元件又沒有提供change事件

"childupdated"

/>

new Vue 中究竟發生了什麼?

new vue 是例項化乙個vue物件 在建構函式中執行 init options 隨後匯入五大mixin,進行例項化的初始化過程 initmixin vue options初始化 statemixin vue 狀態 props state computed watch eventsmixin vu...

http enter以後發生了什麼?

自己總結 輸入 按enter發生了什麼?寫在前面的話 http www.google 8080 script jquery.js http協議名稱 www 子網域名稱 google 主網域名稱 8080埠號 script jquery 請求位址 當協議 子網域名稱 主網域名稱 埠號中任意乙個不同的時...

輸入url發生了什麼

1 瀏覽器的位址列輸入url並按下回車 2 dns解析url對應的ip 3 根據ip位址建立tcp連線 4 http發起請求 5 伺服器處理請求,瀏覽器接受http響應 6 渲染頁面,構建dom樹 7 關閉tcp連線 1 輸入url 常見的url是形如 http 這個網域名稱由三部分組成 協議名 網...