Vue 2.0和3.0筆記

Vue 3

關于組件

今天回顧了下2.0關于組件的內容，3.0定義組件的方式多了一種就是通過單文件組件（Single-File Component）的方式將Vue的模板，邏輯和樣式放到一個文件中，2.0則不同，它是將模板放到一個屬性中，而不是在一個標簽里，這樣可讀性更好，應該也更方便測試。

但代價就是需要使用構建工具，可以把它想象成一個IDE工具，只不過是命令行的形式，需要付出一定的學習成本，我看Visual Studio 2022使用的就是Vite，把它集成進了IDE，即使我不會用Vite也能構建Vue項目，很方便。

也有不依賴構建工具的替代方案petite-vue

Vue對象的參數叫做配置對象

用來顯示文本的{{ }}叫做插值語法，是寫在標簽體之間

在Chrome瀏覽器上按shift+F5強制刷新頁面

在Vue2.0的DevTool中可以下載Vue的開發者工具，Chrome和FireFox的都支持

Vue 2

1、想要使用Vue，首先要創建一個Vue實例，同時要在html中聲明一個容器，容器與實例通過選擇器進行綁定

2、容器與實例是一一綁定的關系

3、真實開發中只有一個Vue實例，并且會配合組件一起使用

4、{{}}中要寫js表達式，它會自動讀取到data中的所有屬性

v-bind: 可以簡寫為 :

指令語法

1、寫在標簽體內部，用于解析標簽的屬性，內容，事件

數據綁定

1、單向綁定（v-bind）：數據只能從data流向頁面

2、雙向綁定（v-model）：數據不僅可以從data流向頁面，也可以從頁面流向data

備注：雙向綁定一般應用于表單控件中

v-model:value可以簡寫為v-model

el的兩種語法

1、new Vue的時候配置el屬性

2、在Vue實例中調用$mount("")，指定元素

data的兩種語法

1、對象式，data作為屬性，值是一個對象

2、函數式，data作為屬性，值是一個函數

沒有用到組件的時候兩種都可以，如果用了組件，就只能用函數式，否則會報錯。

MVVM模型

M - Model，對應data中的數據

V - View，對應模板，el指定的容器

VM - ViewModel，對應Vue實例對象，起到雙向綁定的作用

事件處理

1、使用v-on:xxx或@xxx，xxx是事件名

2、在methods配置的函數是Vue所管理的，所以this指向的是實例對象

3、@click和@click($event)是同一個意思，如果要傳遞自定義的參數，又想使用event對象，可以這樣寫
?

事件修飾符

在事件的后面使用點語法，并帶上特定的字符串，可以讓事件更具多樣化。

常用的幾個：

1、prevent，阻止事件的默認行為，等同于在事件中使用了event.preventDefault();

2、stop，阻止事件的冒泡，等同于在事件中使用了event.stopPropagation();

3、once，讓事件只觸發一次，等同于記錄了觸發次數并在調用前比較了下

鍵盤事件

為了便于操作，有時候軟件需要綁定常用的鍵盤事件，輔助輸入，Vue也做了相應的事情

1、Vue中常用事件的別名：

回車 -> enter；

刪除 -> delete；

退出 -> esc；

空格 -> space；

換行 -> tab（特殊，需要配合keydown使用）

2、未提供的別名，可以使用原始的key值綁定，但要寫成短橫線命名的方式。

3、系統修飾鍵，ctrl，alt，shift，win在keydown和keyup事件里表現形式不同，在keyup中需按下系統鍵+其他鍵，才能觸發；在keydown事件中，只需按下系統鍵就會觸發。

4、也可以使用keycode去綁定鍵盤按鍵，但不推薦，因為這種方式已經被官方廢棄，而且不同的鍵盤的按鍵的keycode還不統一。

計算屬性

它是通過已有的屬性計算得來

底層原理是借助了Object.definepreperty方法提供的getter和setter

get函數什么時候執行？

1、初次加載時執行

2、當依賴的屬性發生改變時，重新執行

計算屬性與methods相比，由于有緩存機制所以效率更高，多次調用同一個計算屬性只執行一次，多次調用同一個methods會計算多次。

如果計算屬性要被修改，還需要定義set函數，在set中去修改依賴的屬性。

監視屬性watch

1、當監視的屬性的值發生變化時，它的回調函數立即被調用

2、監視的屬性必須存在

3、監視的兩種寫法：（1）在配置屬性中帶入watch配置（2）通過vue的實例調用$watch函數

在watch中配置immediate為true，頁面初始化時立即監視。

深度監視

如果需要監視多層級的數據，需要用到深度監視，使用方法是在監視屬性中配置deep屬性。

計算屬性與監視屬性的區別

1、computed能完成的功能，watch都可以完成

2、watch能完成的功能，computed不一定能完成，比如watch可以進行異步操作，因為它沒有返回值

兩個關于函數聲明的小原則

1、所有被vue管理的函數，最好寫成普通函數，因為這樣寫this是vue實例或組件實例

2、所有不被vue管理的函數（例如：定時器回調函數，ajax回調函數），最好寫成箭頭函數，這樣寫的this是vue實例或組件實例。

綁定樣式

綁定class樣式的三種寫法

寫法:class=xxx，xxx可以是字符串，數組，對象

1、字符串寫法，適用于類名不確定，需要動態指定

2、數組寫法，適用于類型數量不確定，名字也不確定

3、對象寫法，適用于數量確定，名字確定，但要動態指定用不用

style樣式

:style="{fontSize:xxx}"，xxx是動態值。

:style="[a, b]", a和b是樣式對象。

條件渲染

有兩種方式進行條件渲染：v-show和v-if

使用v-show時，未顯示的元素仍然會顯示在頁面上，只不過display的樣式被設置為none，所以在需要頻繁切換元素的場景下效率更高。

而使用v-if時，未顯示的元素壓根不會顯示在頁面上，但它的優勢在于可以配合使用v-else-if，v-else進行比較復雜的邏輯判斷，需要注意的是，在使用它們的時候不能被“打斷”，否則會出錯。

列表渲染

列表渲染使用v-for指令，在需要列表展示的元素上寫元素，語法如下：v-for="(item, index) in list" :key=xxx。

它可以遍歷：數組，對象，字符串（用的少），指定次數（用的少）

在實際開發中，應使用唯一標示來修飾key，否則在逆序添加，刪除等破壞順序的操作后會引起顯示的問題。

收集表單數據

當控件為輸入框時，v-model收集的就是value值，不用額外操作。

當控件為單選框時，v-model收集的還是value值，但需要給每個單選框配置value值。

當控件為多選框時，v-model收集的還是value值，不但要給每個多選框配置value值，還需要將data中的承載數據的值的類型設置為數組。（除非是只有一個多選框，這樣就不用配置，因為只需要收集true或false，這是它的默認行為）

v-model還有三個點語法的修飾符：

v-model.number：自動進行數值轉換

v-model.lazy：延遲數據的收集，在輸入時就會發起網絡請求的場景會有點用

v-model.trim：自動進行刪除前后空格

過濾器

對要顯示的數據進行格式化的處理，它適用于一些簡單的邏輯。

語法：

1、注冊過濾器有兩種形式，第一種是局部過濾器，只能在當前Vue實例中使用，格式為：

new Vue({

filters:{

filterName(value){}

}

})

還有一種是全局過濾器，可以在其他的Vue實例中使用，格式為：

Vue.filter("filterName", function(value){

});

2、使用過濾器，語法為：{{ target | filterName }}，這種用的比較多，還有一種是在v-bind中使用：:x = "target | filterName"

備注：多個過濾器可以并聯使用。

內置指令

v-text指令

它的作用是往控件中填充文本。

與插值語法不同的是，它會完全替換文本的內容，插值語法則不會，所以插值語法更加靈活。

v-html指令

它的作用是往控件中填充html內容。

由于可以填充html所以存在安全性問題，容易導致XSS攻擊。

不要在用戶可以輸入的地方使用它。

v-cloak指令

這個指令沒有值，它的作用是在網絡條件不佳的情況下，不顯示讓用戶摸不著頭腦的插值語法。所以用于優化性能。

v-once指令

這個指令也沒有值，它的作用是讓加載的內容只初始化一次，避免每次都更新它。

v-pre指令

添加了該指令的標簽會跳過Vue的編譯過程。

可利用它跳過沒有插值語法，沒有指令語法的節點，加快編譯速度。

生命周期

它又稱為，生命周期回調函數，生命周期函數，生命周期鉤子。

函數名不可更改，可以在里面寫業務邏輯。

函數內部的this指向vm實例對象或組件實例對象。

目前學到了8個，4對生命周期鉤子，分別是：創建前和已創建，掛載前和已掛載，更新前和已更新，銷毀前和已銷毀。

常用的生命周期鉤子：

1、mounted：發送ajax請求，訂閱消息，啟動定時器，綁定自定義事件等初始化操作

2、beforeDestroy：在銷毀前，應清除定時器，解綁自定義事件，取消消息訂閱

關于銷毀Vue實例

銷毀后自定義事件會失效，但是綁定的DOM事件不會失效。

在beforeDestroy中對數據的操作是無效的，因為不會再觸發更新流程了。

組件

非單文件組件

使用組件的步驟：1、創建組件 2、注冊組件 3、使用組件

1、如何創建組件

使用Vue.extend(options)創建，其中options和new Vue(options)時傳入的參數幾乎一致，區別如下：

無需使用el指定容器id
data必須寫成函數，因為寫成函數后再被復用就不會出現重復引用的問題

備注：在聲明組件的配置屬性中使用template配置組件的結構。

2、如何注冊組件

有兩種方式，局部和全局的

局部的方式：在new Vue()中傳遞components選項

全局的方式：Vue.component('組件名', 組件)

3、如何使用組件

在html的容器中，編寫<組件名></組件名>標簽即可

一些細節

1、組件名

一個單詞組成：

第一種寫法（首字母小寫）：school

第二種寫法（首字母大寫）：School

多個單詞組成：

第一種寫法（帶橫杠）：my-school

第二種寫法（大駝峰）：MySchool（需要Vue腳手架支持）

備注：

可以在配置項中使用name屬性去定義開發者工具中的組件名

2、關于組件標簽

第一種寫法：<school></school>

第二種寫法：<school/>

備注：如果沒有使用腳手架工具，第二種寫法只會渲染一次

3、簡寫

const school = Vue.extend(options);

可以簡寫成

const school = options;

在開發中簡寫方式更常用哦。

模塊化

    // 模塊化的三種方式// 1、分別暴露export const school = Vue.extend({});// 2、統一暴露const school2 = Vue.extend({})export {school2}// 3、默認暴露const school3 = Vue.extend({})export default school3// 使用默認暴露時有一個優勢，在引入時可以簡寫import XXX from "xxx"// 使用分別暴露和統一暴露時，需要這樣寫import {xxx} from "xxx"// 由于Vue.extend可以省略，可以直接寫配置對象，所以就變成了上述的形式，這里使用了默認暴露的形式export default({name:"School",data(){return {schoolName: "北京大學",schoolAddress: "北京市海淀區"}}});