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 一直為空,以下...