vue基礎知識

阿新 • • 發佈：2020-12-30

技術標籤：# vue

序言
2020年的初雪，寫點東西紀念一下吧

寫在前面

雖是基礎，但也要經常回顧，以免遺忘，從而給自己的開發過程中帶來不便

概述

Vue是由一個個例項構建而成的，一個元件就是一個Vue的例項

官網

https://cn.vuejs.org/v2/guide/ link

屬性和方法

methods、watch、computed 、filter

computed

當頁面中有某些資料依賴其他資料進行變動的時候，可以使用計算屬性
注意：在data中沒有直接宣告出要計算的變數，也可以直接在computed中寫入
示例程式碼：

      <p id="app"> 
{{fullName}}  </p>
        computed: {  
            fullName() {  
                return this.firstName + '' + this.lastName  
            }  
        }  
    })

計算屬性預設只有getter，可以在需要的時候自己設定setter
示例程式碼：

 computed: {
        fullName: {
            // getter
            get: function () {
                return 
 this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                let names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

watch

watch和computed很相似，watch用於觀察和監聽

頁面上的vue例項，當然在大部分情況下我們都會使用computed，但如果要在資料變化的同時進行非同步操作或者是比較大的開銷，那麼watch為最佳選擇。watch為一個物件，鍵是需要觀察的表示式，值是對應回撥函式。值也可以是方法名，或者包含選項的物件。
注意：如果在data中沒有相應的屬性的話，是不能watch的，這點和computed不一樣。
示例程式碼：

  watch: {
            firstName: function (val) {
                this.fullName = val + '' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + '' + val
            }
        }

methods

方法，只要呼叫就會重新執行一次，相應的有一些觸發條件

methods:{
// 進行方法的定義
getName(){ }
}

methods和computed二者差別

在某些時候methods和computed看不出來具體的差別，但是一旦在運算量比較複雜的頁面中，就會體現出不一樣
computed是具有快取的，這就意味著只要計算屬性的依賴沒有進行相應的資料更新，那麼computed會直接從快取中獲取值，多次訪問都會返回之前的計算結果

computed和watch二者差別

一個是計算，一個是觀察，在語義上是有區別的
計算是通過變數計算來得出資料
而觀察是觀察一個特定的值，根據被觀察者的變動進行相應的變化

filter

過濾器，一般用於文字格式化

// g格式化前面的值即為第一個傳參，即msg1，而這裡的 alice 則是第二個引數 msg2
 <h3>{{msg | formatText('alice')}}</h3>
filters: {
        formatText(msg1,msg2) {         
         }       
}

路由

前端路由的核心，就在於 —— 改變檢視的同時不會向後端發出請求。
分為宣告式路由和程式設計式路由

宣告式

 <router-link  :to="{ name: 'user_info', params: { name: userinfo.loginname }}"></router-link >

程式設計式

this.$router.push({
   name:"detail",
   params:{
    name:'nameValue'
 }
});

獲取路由傳遞的引數

this.$route.params.id
this.$route.query.id

注意：接收引數的時候，已經是$route而不是$router了哦！

params傳參和query傳參的區別

query要用path來引入，params要用name來引入，
接收引數都是類似的，分別是this.$route.query.name和this.$route.params.name
query更加類似於我們ajax中get傳參，params則類似於post
即query在瀏覽器位址列url中顯示引數，而params則不顯示

hash模式和history模式的區別

Vue-router 中有hash模式和history模式

hash模式

vue的路由預設是hash模式，一般開發的單頁應用的URL都會帶有#號的hash模式，
hash —— 即位址列 URL 中的 # 符號，它的特點在於：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對後端完全沒有影響，因此改變 hash 不會重新載入頁面。

history模式

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支援）這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向後端傳送請求。

總結

hash 模式和 history 模式都屬於瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（通過呼叫瀏覽器提供的介面）來實現前端路由

生命週期

beforeCreate

例項元件剛建立，元素DOM和資料都還沒有初始化，暫時不知道能在這個週期裡面進行的生命操作，一般還未用過

created

資料data已經初始化完成，方法也已經可以呼叫，但是DOM未渲染
可以在這個週期裡面進行後臺介面的請求，渲染的時候速度反而會更快
created時候可以呼叫的資料

beforeMount

DOM未完成掛載（未將js裡面的資料渲染到html上），資料初始化完成，但是資料的雙向繫結還是顯示{{}}，這是因為Vue採用了Virtual DOM（虛擬Dom）技術。先佔住了一個坑。

mounted

資料和DOM都完成掛載，在上一個週期佔位的資料把值給渲染進去
這個週期適合執行初始化需要操作DOM的方法
特別注意
mounted渲染完畢並且子元件也已經渲染完畢

beforeUpdate

只要是頁面資料改變了都會觸發，資料更新之前，頁面資料還是原來的資料，當你請求賦值一個數據的時候會執行這個週期，如果沒有資料改變不執行。

updated

只要是頁面資料改變了都會觸發，資料更新完畢，頁面的資料是更新完成的。
beforeUpdate和updated要謹慎使用，因為頁面更新資料的時候都會觸發，在這裡操作資料很影響效能和容易死迴圈

beforeDestroy

這個週期是在元件銷燬之前執行，有點類似路由鉤子beforeRouterLeave,都是在路由離開的時候執行，只不過beforeDestroy無法阻止路由跳轉，但是可以做一些路由離開的時候操作，因為這個週期裡面還可以使用data和method

Destroyed

暫時不知道這個週期跟beforeDestroy有什麼區別，在這個週期裡面呼叫data的資料和methods的方法都能呼叫

this.$set(‘物件’，‘鍵名’,‘鍵值’)

作用：給data物件新增屬性，並觸發檢視更新
當vue的data裡邊宣告或者已經賦值過的物件或者陣列（數組裡邊的值是物件）時，向物件中新增新的屬性，如果更新此屬性的值，是不會更新檢視的；即該屬性必須是在data中存在的，檢視層才會響應該資料的變化
這時候便需要使用 this.$set來進行強制重新整理檢視中的繫結值

this.$forceUpdate()

迫使Vue例項重新（rander）渲染虛擬DOM，注意並不是重新載入元件

this.$nextTick(()=>{})

將回調延遲到下次 DOM 更新迴圈之後執行,在修改資料之後立即使用它，然後等待 DOM 更新

mixins混入

被呼叫的mixins和當前呼叫的vue檔案中相關呼叫的程式碼順序

data：兩者都存在，呼叫當前元件的
method：兩者都存在，呼叫當前元件的
computed：兩者都存在，呼叫當前元件的
created:先呼叫混入的，再呼叫元件的created，其它生命週期也應該一樣
watch：先呼叫混入的，再呼叫元件的watch
總結：要麼兩者都呼叫，要麼只調用當前元件中的

mixins在業務中的使用

混入到當前檔案中，即為當前vue檔案的一部分，
所以，呼叫的時候和當前元件呼叫一致，直接this.屬性或方法即可

Vuex:狀態管理庫

官網：https://vuex.vuejs.org/zh/ link

概述

一個應用中，共享元件的某一個狀態，來自不同檢視的行為需要變更同一狀態

父子元件

子元件的載入時機

因為隨著父元件一同載入了，所以同父元件一樣，生命週期函式只執行一次的，在同父元件載入時，便已經執行了，不會多次執行
但是，可以點選開啟子元件的時候，手動執行在created等生命週期函式裡執行的方法

寫在最後

文章中若有錯誤，希望大家可以指出，共同學習，共同進步。
在下，感激不急！！！