vue非同步請求和同步 VUE知識點集錦

2021-10-12 04:41:42 字數 2261 閱讀 5928

mvvm模式

核心理念:

通過宣告式的資料繫結 來實現 view 層和其他層的分離;

model 層

model 層,對應資料層的域模型,它主要做域模型的同步。通過 ajax/fetch 等 api 完成客戶端和服務端業務 model 的同步。在層間關係裡,它主要用於抽象出 viewmodel 中檢視的 model。(域模型:融合了行為和資料的域的物件模型)

view 層

view 層,作為檢視模板存在,在 mvvm 裡,整個 view 是乙個動態模板。除了定義結構、布局外,它展示的是 viewmodel 層的資料和狀態。view 層不負責處理狀態,view 層做的是 資料繫結的宣告、 指令的宣告、 事件繫結的宣告。

viewmodel 層

viewmodel 層把 view 需要的層資料暴露,並對 view 層的 資料繫結宣告、 指令宣告、 事件繫結宣告 負責,也就是處理 view 層的具體業務邏輯。viewmodel 底層會做好繫結屬性的監聽。當 viewmodel 中資料變化,view 層會得到更新;而當 view 中宣告了資料的雙向繫結(通常是表單元素),框架也會監聽 view 層(表單)值的變化。一旦值變化,view 層繫結的 viewmodel 中的資料也會得到自動更新。

模式

mvvm作為資料繫結的入口,整合observer、compile和watcher三者,通過observer來監聽自己的model資料變化,通過compile來解析編譯模板指令,最終利用watcher搭起observer和compile之間的通訊橋梁,達到資料變化 -> 檢視更新;檢視互動變化(input) -> 資料model變更的雙向繫結效果。(observer:資料***,觀察者;compile:指令編譯器;watcher:訂閱者;)

vue的生命週期

所有的vue應用都是從這裡開始的,當例項化出vue物件時就已經進入了vue的生命週期。

1)進入的生命週期第乙個鉤子函式就是beforecreate。在這之前元件還沒有真正的初始化。

2)在beforecreate之後,vue對data物件作了getter/setter處理,並且將物件放在乙個observe裡面以便於監控物件,另外還有使用initevents繫結事件

3)在元件初始化完成後,遇到第二個鉤子函式:created。在這個階段我們可以訪問到了data的屬性以及繫結的事件

4)通過了created階段後元件的生命週期到了beforemount,在這個階段dom結構還沒有生成,但是已經建立了el,元件掛載的根節點。在beforemount執行完成後開始渲染dom,執行_render方法,_mount方法,然後會有new出乙個watcher物件,形成vnode節點,然後會更新dom

5)渲染完畢後元件就會到了下乙個生命週期mounted,一般的非同步請求都會寫在這,這個階段dom已經渲染出來了。至此乙個元件已經完整的出現在眼前了,但是生命週期卻還沒有停止。

6)當元件需要更新的時候生命週期會先到達beforeupdate,在這個階段顯示資料並沒有更新,但是dom中的資料已經改變了,這是因為雙向繫結的關係

7)走過beforeupdate元件完成了更新,生命週期走到updated

8)完成更新後的元件應該被銷毀了,beforedestroy,這個階段元件還沒有被銷毀

destroy這個是真正的銷毀

computed和watch的區別

computed: -->計算屬性

1支援快取,只有依賴資料發生改變,才會重新進行計算

2)不支援非同步

3)如果乙個屬性是由其他屬性計算而來,這個屬性依賴其他屬性,多對一(多個值影響乙個值)的情況一般用computed;

watch: -->監聽屬性

監聽屬性;一定是存在的屬性;是data中的屬性;

1)不支援快取,資料變化,直接會觸發相應的操作

2)支援非同步

3)當乙個屬性發生變化時,需要執行對應的操作;一對多(乙個值影響多個值)的情況一般用watch;

getJSON非同步請求和同步請求

同時執行多個 getjson 時,資料混亂的問題的解決方法 在執行之前加 ajaxsettings.async false 同步執行 執行你的 之後及時恢復為 ajaxsettings.async true 非同步執行 不然影響別的地方的需要非同步執行的 example ajaxsettings.a...

getJSON非同步請求和同步請求

先看一段 var x document.getelementsbyname data var i for i 0 i x.length i function data 本段 的意圖是根據元素名取得頁面上所有元素,然後逐個傳送請求到後台,將根據該得到的資料在頁面上進行展示,中,for迴圈應是乙個原子操...

getJSON非同步請求和同步請求

先說一下我遇到的問題吧,我之前的乙個函式想呼叫上乙個函式的返回值,但是它的返回值一直為空,後來翻了一些資料才明白是非同步請求在作怪,不多說,看例子,這是我之前有返回值函式的 function get no order array return order 後來發現列印的陣列order 一直為空,以下...