vue

定義

以數(shù)據(jù)驅(qū)動視圖的漸進式（輕量級）mvvm框架
響應(yīng)式原理：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

監(jiān)聽和計算

watch
對數(shù)據(jù)的監(jiān)聽，受數(shù)據(jù)類型的影響，當監(jiān)聽數(shù)組或?qū)ο髸r需要開啟deep深度監(jiān)聽，可以執(zhí)行異步
comouted
監(jiān)聽一個數(shù)據(jù)并返回一個新的數(shù)據(jù)，不受數(shù)據(jù)類型的影響，并且自帶緩存，會做新舊值比較，當兩者相同時則不觸發(fā)，不能執(zhí)行異步代碼，因為他需要立即返回數(shù)據(jù)

內(nèi)置組件

component，keep-alice，slot

組件通信

父傳子

v-bind+props,v-model

子傳父

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

兄弟

讓父組件充當中轉(zhuǎn)站。

跨級

vuex，$root,

自定義指令和過濾器

directive

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

過濾器filter

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

vue組件的組成部分和api

樣式，dom，js；

api

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

• data 為什么是函數(shù)
  沖突問題，內(nèi)存開銷

插件

插件的安裝Vue.use(plugin)

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

vuex

定義

全局狀態(tài)管理器

組成部分

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

vuex執(zhí)行|工作流程

state到組件，組件通過dispath調(diào)用actions進行通信，actions通過commit調(diào)用mutations修改state，state是雙向數(shù)據(jù)響應(yīng)的，會自動讓組件更新。

輔助函數(shù)

所有api前面加map

vue-router

路由定義

根據(jù)不同的地址呈現(xiàn)不同的內(nèi)容或頁面

路由三大組成部分

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

路由的跳轉(zhuǎn)方式

聲明式導航（標簽導航），編程式導航（js跳轉(zhuǎn)方式）

路由跳轉(zhuǎn)方法

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

路由模式

mode:

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

路由傳參

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

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

每一個路由守衛(wèi)都有一個回調(diào)函數(shù)，該函數(shù)里有三個參數(shù)，分別是：
to：及將要進入的路由對象
from: 即將要離開的路由對象
next: 必執(zhí)行函數(shù)，默認參數(shù)true，false則阻止路由跳轉(zhuǎn)

全局

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

組件

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

路由類型

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

路由配置的api

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

路由實例配置

mode ，
routes,
scrollBehavior,

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。