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;
Vue知識點集錦
一 使用了vue的頁面,肯定會經歷乙個完整的生命週期,與一般的普通頁面是不一樣的,所以直接獲取dom結構是獲取不到的,只有在mounted之後才能獲取到 servicemanagementaddcrud.vueinit function 一些dom操作,在vue的mounted 函式裡面再進行繫結 ...
vue非同步請求和同步 VUE知識點集錦
mvvm模式 核心理念 通過宣告式的資料繫結 來實現 view 層和其他層的分離 model 層 model 層,對應資料層的域模型,它主要做域模型的同步。通過 ajax fetch 等 api 完成客戶端和服務端業務 model 的同步。在層間關係裡,它主要用於抽象出 viewmodel 中檢視的...
Vue常用知識點
使用cdn 通過npm安裝 npm install vue 獲取當前繫結的元素獲取當前繫結的資料 vm.data 更換data物件重新整理檢視,盡量不去更換 監控模型的變化 vm.watch message function newval,oldval 生命週期 3.3 屬性的計算1.vue中的閃爍...