Vue專案總結

vue生命週期

beforecreate 初始化例項 不能獲取dom節點

created 例項化建立

beforemount 過渡階段獲取不到具體的dom節點 vue掛載的根節點已經建立

mounted 資料和dom都渲染出來了

beforeupdate 檢測資料更新時，在dom更新之前執行

updated dom更新結束後執行

beforedestory vue例項銷毀之前執行

destoryed 銷毀例項後執行

object.defineproperty

mvvm 雙向繫結 採用資料劫持發布者-訂閱者模式的方法object.defineproperty。來劫持各個屬性的值再發布給訂閱者

實現乙個資料監聽observer 能夠對資料物件的所有屬性進行監聽 如果有變動可以通知到訂閱者

實現乙個指令解析起器complie 對每個元素節點進行掃瞄和解析。根據指令替換資料以及繫結相應的更新函式

實現乙個watcher作為連線observer和 complie 之間的橋梁 能夠訂閱並收到每個屬性變動的通知，執行指令繫結的函式並更新檢視

watch是為了監聽響應資料的變化 omputed是自動監聽依賴變化，從而動態的返回內容

主要區別**於用法，只是需要改變動態值就用computed 需要值之後改變業務邏輯使用watch

資料驅動和元件化

v-if根據後面的資料的真假判斷節點是否被刪除或者重建。v-show 只是修改節點的樣式控制display的顯示與隱藏是一直在dom樹上面的

v-if切換會有更高的消耗 不適合做頻繁的切換 v-show 有更多的初始化渲染 適合做頻繁的切換

vuex實現了乙個單項資料流在全域性擁有乙個state存放資料 當元件要更新state時必須通過mutation進行。mutation 同時提供了訂閱者模式供外部外掛程式呼叫state資料的更新而當所有非同步操作或批量操作要走action時，無法直接修改state 的需要通過mutation來修改state資料。最後根據state的變化，渲染到檢視上

五個部分：state getter mutations module action

父傳子： props

子傳父： $emit

兄弟元件 ： $emit 和 $on

跨級元件通訊 ： provide inject（provide和inject的繫結並不是響應的，使用vue2.6.0中新增的vue.observable 優化響應式）

優點： vue盡可能通過簡單的api實現響應的資料繫結和組合的檢視元件，核心是乙個響應資料的繫結系統mvvm 資料驅動 簡潔高效快速友好

缺點是不支援低版本的瀏覽器，不利於seo 優化 第一次載入時間過長，不可以使用瀏覽器導航按鈕的的前進 後退

model代表資料模型 也可以在model中定義資料修改和操作邏輯和任務

view 代表ui元件 他負責將資料模型通過ui轉化出來

viewmodel監聽資料模型和改變以及控制檢視的行為，處理model 和 view之間的互動是雙向的，因此model的變化會同步到view，view的變化也會同步到model

beforecreate

created

beforemount

mounted

created 在渲染之前初始化資料時使用此時dom還未掛載

mounted 例項已掛載可以操作dom資料

$route是路由資訊物件 包含path params hash query fullpath name matched等路由資訊引數

$router 是路由例項物件包含了路由的跳轉方法和鉤子函式

vue專案總結

1.建立專案 vue create 專案名稱 1.1建立手動選擇 1.2選擇專案 最簡單 1.3選擇 第乙個 2.新專案劃分目錄結構 components views 檢視 router 路由 store 狀態管理 network 網路相關 common 公共js 2.1 引用兩個css檔案，放入當...

Vue專案總結上

src 源檔案目錄 babelrc 解析配置檔案 gitgnore 忽略不用上傳的檔案 package.json 包的配置檔案 webpack.config.js 打包配置檔案 1.公共固定的元件 比如頭部 底部 就放在common統一管理,再在common檔案中建乙個index.js統一來暴露外掛...

vue專案使用簡略總結

1 利用 iview cli搭建專案結構 2 搭建完畢之後將proxy.js和 server.js 放置到node modules webpack dev server lib目錄下，以實現跨域訪問公司平台內的介面資源 3 實際開發中發現無論是開發環境還是打包之後的部署檔案在ie safari ip...