Vue

Vue基礎(chǔ)

框架

什么是MVVM: MVVM 是 Model-View-ViewModel 的縮寫。

Model代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。

View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來。

ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡單理解就是一個(gè)同步View 和 Model的對象，連接Model和View。

數(shù)據(jù)會綁定到viewModel層并自動將數(shù)據(jù)渲染到頁面中，視圖變化的時(shí)候會通知viewModel層更新數(shù)據(jù)

在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會同步到Model中，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上。

ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理。 核心：數(shù)據(jù)驅(qū)動、組件化思想 單頁面優(yōu)缺點(diǎn): 優(yōu)點(diǎn)：Vue 的目標(biāo)是通過盡可能簡單地 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。MVVM、數(shù)據(jù)驅(qū)動、組件化、輕量、簡潔、高效、快速、模塊友好。

缺點(diǎn)：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優(yōu)化（如果要支持SEO，建議通過服務(wù)端來進(jìn)行渲染組件）；第一次加載首頁耗時(shí)相對長一些；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)、后退。

基礎(chǔ)語法

模板語法： 1.文本：Message:{{msg}} 2.原始HTML 3.Attribute:

4.JavaScript:{{ message.split().reverse().join() }} class與style綁定： 1.2.3.<div v-bind:style="{color:activeColor, fontSize:fontSize+px}> 4.

條件渲染

v-if:

Vue is awesome!

Oh no

Woo

v-show:

Hello!

v-if vs v-show: v-if會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀、重建。且是惰性的，如果初始渲染條件為假，則什么也不做，直到條件第一次變真。 v-show：無論條件為什么，元素都會被渲染，只是簡單地基于css變化。 v-if與v-for一同使用時(shí)，v-for有更高優(yōu)先級。v-if會被應(yīng)用于每個(gè)v-for循環(huán)中。

計(jì)算屬性和偵聽器

計(jì)算屬性 var vm = new Vue({ el: #example, data: { message: Hello }, computed: { // 計(jì)算屬性的 getter reversedMessage: function () { // this 指向 vm 實(shí)例 return this.message.split().reverse().join() } } })

偵聽器： var vm = new Vue({ el: #demo, data: { firstName: Foo, lastName: Bar, fullName: Foo Bar }, watch: { firstName: function (val) { this.fullName = val + + this.lastName }, lastName: function (val) { this.fullName = this.firstName + + val } } })

列表渲染

例子：

{{ item.message }}

就地更新策略：如果數(shù)據(jù)項(xiàng)的順序改變，Vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素。并且確保它們在每個(gè)索引位置正確渲染。 key：使用 key 來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識，Diff 算法就可以正確地識別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn) 所以一句話，key 的作用主要是為了高效的更新虛擬 DOM

事件處理

內(nèi)聯(lián)處理器：Say hi 需要在內(nèi)聯(lián)語句處理器中訪問原始事件的DOM事件，可以使用特殊變量$event Submit methods: { warn: function (message, event) { // 現(xiàn)在我們可以訪問原生事件對象 if (event) { event.preventDefault() } alert(message) } } 事件修飾符：

1. .stop阻止單擊事件繼續(xù)傳播2. .prevent提交事件不再重載頁面3. .capture添加事件監(jiān)聽器時(shí)使用事件捕獲模式，內(nèi)部元素的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理4. .self只當(dāng)在event.target是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)，事件不是從內(nèi)部觸發(fā)的5. .once點(diǎn)擊事件將只會觸發(fā)一次6. .passive對應(yīng)addEventListener中的passive，不能與.prevent一起使用，.prevent會被忽略。

...

1. 按鍵修飾符 keyup.enter keyup.page-down 8)按鍵碼：keyup.f1 9）系統(tǒng)修飾符：.ctrl, .alt, .shift, .meta 10）鼠標(biāo)修飾符：.left, .right, .middle

表單輸入綁定v-model

修飾符：

1. .lazy: 在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy 修飾符，從而轉(zhuǎn)為在 change 事件_之后_進(jìn)行同步2. .number: 自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型3. .trim: 自動過濾用戶輸入的首尾空白字符

組件

插槽 具名插槽：

A paragraph for the main content.

And another one.

動態(tài)組件、異步組件

動態(tài)組件保持狀態(tài)：keep-alive

異步組件：。Vue 只有在這個(gè)組件需要被渲染的時(shí)候才會觸發(fā)該工廠函數(shù)，且會把結(jié)果緩存起來供未來重渲染。 new Vue({ // ... components: { my-component: () => import(./my-async-component) } })

父子組件

方法調(diào)用： 1）父組件調(diào)用子組件方法

子組件

2）子組件調(diào)用父組件： 父組件：

子組件：

通信： 1）父傳子 父組件：prop單向數(shù)據(jù)流，父級prop的更新會向下流動到子組件中，反過來不行。這樣會防止從子組件意外變更父級組件的狀態(tài)。

子組件：

2）子傳父 父組件：

自定義事件

自定義組件的v-model：一個(gè)組件上的 v-model 默認(rèn)會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會將 value attribute 用于不同的目的。model 選項(xiàng)可以用來避免這樣的沖突 Vue.component(base-checkbox, { model: { prop: checked, event: change }, props: { checked: Boolean }, template: <input type="checkbox" v-bind:checked="checked" v-on:change="$emit(change, $event.target.checked)" > }) 將原生事件綁定至組件： 1. 2.$listener 3. .sync

生命周期

生命周期：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 父子組件生命周期： 1.父組件：beforeCreate->created->beforeMount 2.子組件：->beforeCreate->created->beforeMount->mounted 3.父組件： ->mounted->beforeDestroy 4.子組件：->beforeDestroy->Destroyed 5.父組件：->Destroyed 過渡、動畫： 當(dāng)插入或刪除包含在 transition 組件中的元素時(shí)，Vue 將會做以下處理： 自動嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動畫，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名。 如果過渡組件提供了 JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用。 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作 (插入/刪除) 在下一幀中立即執(zhí)行。(注意：此指瀏覽器逐幀動畫機(jī)制，和 Vue 的 nextTick 概念不同)

可復(fù)用性、組合

混入：混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

自定義指令

Vue.directive(focus, { inserted: function(el){ el.focus() } }) 鉤子函數(shù)： bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。 inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。 update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。 componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。 unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

Vue.directive(demo, { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = name: + s(binding.name) +

+ value: + s(binding.value) +

+ expression: + s(binding.expression) +

+ argument: + s(binding.arg) +

+ modifiers: + s(binding.modifiers) +

+ vnode keys: + Object.keys(vnode).join(, ) } })

new Vue({ el: #hook-arguments-example, data: { message: hello! } }) 過濾器 {{ message | capitalize }}

filters: { capitalize: function (value) { if (!value) return value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }

Vue.filter(capitalize, function (value) { if (!value) return value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })

new Vue({ // ... })

Vue源碼

兩個(gè)核心API：h.js, patch(app, vnode)

虛擬DOM和diff算法

vdom：虛擬dom，用JS模擬DOM，因?yàn)镈OM操作昂貴，將DOM對比操作放在JS層，提高效率 diff：linux的基礎(chǔ)命令，vdom中使用時(shí)為了更快找出需更新的節(jié)點(diǎn)。 實(shí)現(xiàn)：patch(container, vnode) patch(vnode, newVnode) 核心邏輯：createElement，updateChildren 解析模板 模板本質(zhì)是字符串，有邏輯，如v-if，v-for。與html很像，但是有區(qū)別，html無邏輯，最終要轉(zhuǎn)換為html來顯示 render函數(shù)： vm._c其實(shí)相當(dāng)于snaddom中的h函數(shù)。render函數(shù)執(zhí)行后，返回vnode。 1）with函數(shù) 2）類似vdom的h函數(shù) updateComponent： updateComponent中實(shí)現(xiàn)vdom的patch，頁面首次渲染執(zhí)行updateComponent，data中每次修改屬性，執(zhí)行updateComponent。 數(shù)據(jù)響應(yīng)式原理: 修改data屬性后，vue立刻監(jiān)聽到，data屬性被代理到vm上

Vuex

State: state: { count: 0 },

this.$store.state.count

import { mapState } from vuex ...mapState({})

Getter:就像計(jì)算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算。

getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } }

Mutations: Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。

這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個(gè)參數(shù)

mutations: { increment (state) { // 變更狀態(tài) state.count++ } }

Actions: Action 類似于 mutation，不同在于： Action 提交的是 mutation，而不是直接變更狀態(tài)。 Action 可以包含任意異步操作。 actions: { increment (context) { context.commit(increment) } } Modules: Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割

Vue-router

基礎(chǔ)路由

動態(tài)路由匹配 { path: /user/:id, component: User } this.$route.params 嵌套路由：借助router-view

編程式導(dǎo)航： router.push() router.replace(location,onComplete?,onAbort?)替換掉當(dāng)前history的記錄 router.go(n)：在history記錄向前或向后幾步 命名路由： const router = new VueRouter({ routes: [ { path: /user/:userId, name: user, component: User } ] })

鏈接到命名路由： User router.push({ name: user, params: { userId: 123 }}) 命名視圖：

User Settings

{ path: /settings, // 你也可以在頂級路由配置命名視圖

component: UserSettings, children: [{ path: emails, component: UserEmailsSubscriptions },

{ path: profile, components: { default: UserProfile, helper: UserProfilePreview } }] } 重定向和別名： 1）

重定向：{ path: /a, redirect: /b } 2）別名：/a 的別名是 /b，意味著，當(dāng)用戶訪問 /b 時(shí)，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。 { path: /a, component: A, alias: /b } 路由組件傳參：使用props將組件和路由解耦 1）布爾模式：{ path: /user/:id, component: User, props: true } 2）對象模式：{ path: /promotion/from-newsletter, component: Promotion, props: { newsletterPopup: false } } 3）函數(shù)模式：{ path: /search, component: SearchUser, props: (route) => ({ query: route.query.q }) } 路由模式： 1）默認(rèn)hash模式（帶#），使用url的hash來模擬一個(gè)完整的url，于是當(dāng)url改變時(shí)，頁面不會重新加載。 2）history模式：優(yōu)美，利用history.pushState API完成URL跳轉(zhuǎn)，而無需重新加載頁面：mode: history

進(jìn)階路由

導(dǎo)航守衛(wèi)：

1）全局前置守衛(wèi)：

router.beforeEach((to, from, next)=>{})

2）全局解析守衛(wèi)：

router.beforeResolve

3）全局后置鉤子：

router.afterEach((to, from)=>{})

4）路由獨(dú)享的守衛(wèi)：beforeEnter: (to, from, next)=>{}

5）組件內(nèi)的守衛(wèi)：beforeRouterEnter(to,from,next){}, beforeRouteUpdate(to,from,next){}, beforeRouteLeave(to,from,next){} 路由元信息:=：定義路由的時(shí)候可以配置meta字段，通過遍歷$route.matched來檢查路由記錄中的meta字段。 過渡動效： 數(shù)據(jù)獲取： 1）導(dǎo)航完成后獲?。合韧瓿蓪?dǎo)航，然后再接下來的組件生命周期茍子仲獲取數(shù)據(jù)。 2）導(dǎo)航完成之前獲取：導(dǎo)航完成前，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)，在數(shù)據(jù)成功后執(zhí)行。 滾動行為：只有在history模式才能使用。 scrollBehavior (to, from, savedPosition) { // return 期望滾動到哪個(gè)的位置 return { x: 0, y: 0 } } 路由懶加載 const Foo = () => import(./Foo.vue) const router = new VueRouter({ routes: [ { path: /foo, component: Foo } ] })

axios

特點(diǎn)：

1. 從瀏覽器中創(chuàng)建 XMLHttpRequests2. 從 node.js 創(chuàng)建 http 請求3. 支持 Promise API4. 攔截請求和響應(yīng)5. 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)6. 取消請求7. 自動轉(zhuǎn)換 JSON 數(shù)據(jù)8. 客戶端支持防御 XSRF 常用方法 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 攔截器： // 添加請求攔截器 axios.interceptors.request.use(function (config) { // 在發(fā)送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); });

// 添加響應(yīng)攔截器 axios.interceptors.response.use(function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response; }, function (error) { // 對響應(yīng)錯誤做點(diǎn)什么 return Promise.reject(error); });

刪除攔截器 const myInterceptor = axios.interceptors.request.use(function () {/.../}); axios.interceptors.request.eject(myInterceptor); VUE SSR

Vue3.0

Vite

新特性

組合式API Teleport 觸發(fā)組件選項(xiàng)createRenderer 單文件組件組合式API 單文件組件狀態(tài)驅(qū)動的CSS變量

變更

Global API模板指令 組件 渲染函數(shù) 生命周期 其它 斷開與目標(biāo) VM 的連接，地址：javadebug, transport: 共享內(nèi)存