vue

定義

以數據驅動視圖的漸進式（輕量級）mvvm框架
響應式原理：Object.defineProperty

指令

html，text，show，if，for，model，slot，once，bind，on

修飾符

事件修飾符

• .stop 阻止冒泡
• .prevent 阻止默認事件
• .native 綁定原生事件

指令

• v-model.[number,lazy,trim]
• v-bind:name.sync

鍵盤

• .enter or .13

生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforedestroy
destroyed

監聽和計算

watch
對數據的監聽，受數據類型的影響，當監聽數組或對象時需要開啟deep深度監聽，可以執行異步
comouted
監聽一個數據并返回一個新的數據，不受數據類型的影響，并且自帶緩存，會做新舊值比較，當兩者相同時則不觸發，不能執行異步代碼，因為他需要立即返回數據

內置組件

component，keep-alice，slot

組件通信

父傳子

v-bind+props,v-model

子傳父

v-on+$emit,.sync+‘$emit(‘update:prop’)`

兄弟

讓父組件充當中轉站。

跨級

vuex，$root,

自定義指令和過濾器

directive

控制dom行為的，比如頁面打開后自動讓input獲取焦點

過濾器filter

在不修改原數據的情況下，返回一個處理后的值。比如購物車里給money加前綴等。

vue組件的組成部分和api

樣式，dom，js；

api

data,methods,生命周期，watch，computed，components，name，props，filters，directive

• data 為什么是函數
  沖突問題，內存開銷

插件

插件的安裝Vue.use(plugin)

開發插件：一個帶有install方法的對象，在install函數中使用注入的Vue實例來封裝自己的插件

vuex

定義

全局狀態管理器

組成部分

• strict 嚴格模式，默認非嚴格模式
  非嚴格模式下，state可以被任意修改，mutations可以執行異步
• state 狀態數據
  數據雙向相應
• getters 對state計算出來的新值
• mutations 用于修改state的同步函數
  使用commit調用mutation
• actions 執行異步且只能調用mutations來修改state
  使用dispath調用action
• module 模塊化store
  干什么的？切割vuex，讓每個獨立使用store的頁面擁有自己的store
  什么時候用？比如電商項目，每個頁面除了使用全局的用戶信息外，還有額外的自己獨立頁面使用的狀態。尤其是當小組成員開發的時候，避免沖突，使用模塊化。
• plugins 插件
  讓vuex擁有沒有的功能，比如vuex數據是存在內存中的，刷新頁面會丟，使用vue-persust插件將數據存入本地，當刷新頁面的時候優先從本地讀取。

vuex執行|工作流程

state到組件，組件通過dispath調用actions進行通信，actions通過commit調用mutations修改state，state是雙向數據響應的，會自動讓組件更新。

輔助函數

所有api前面加map

vue-router

路由定義

根據不同的地址呈現不同的內容或頁面

路由三大組成部分

router-link導航 ，router-view視圖，router配置

路由的跳轉方式

聲明式導航（標簽導航），編程式導航（js跳轉方式）

路由跳轉方法

• push：向歷史記錄添加一條,
• replace： 用最新的地址替換當前的歷史紀錄
• go: 通過數字控制前進后退
• back：返回上一個歷史記錄

路由模式

mode:

• hash：錨點路由
• history：歷史路由， h5history對象封裝的
• abstract：給nodejs服務端渲染【ssr】用的（了解即可）

路由傳參

• query 以？開頭的get請求傳參方式
• params 【動態路由】是顯示傳參，非動態路由使用params傳參叫隱式傳參，隱式的參數存在內存，刷新頁面會丟，params傳參只能通過命名路由跳轉
• meta 元數據，用于傳參，更多情況下用于配置路由權限。

路由攔截器|路由生命周期

每一個路由守衛都有一個回調函數，該函數里有三個參數，分別是：
to：及將要進入的路由對象
from: 即將要離開的路由對象
next: 必執行函數，默認參數true，false則阻止路由跳轉

全局

beforeEach(){} 前置守衛，路由權限一般寫在這里
afterEach(){} 后置守衛，沒有next()

組件

beforeRouterUpdate(){} 準備路由更新，使用場景：動態路由
beforeRouterLeave(){} 準備離開路由

路由類型

• 動態路由：一組擁有相同基礎路徑的路由，加載的是同一個模板。 語法/home/:id
• 嵌套路由：一組擁有相同基礎路徑的路由，加載的是不同的頁面。 語法children:[{path:'hot'},component:Hot]

路由配置的api

• name 路由命名
• path 匹配瀏覽器地址欄的里的地址
• component 加載組件
• alias 給路由起別名
• redirect 重定項
• meta 元數據，用于路由配置里的傳參
• children 嵌套路由的api

路由實例配置

mode ，
routes,
scrollBehavior,

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。