技術要求
TypeScript
Vue3
1、用Vue+Vue-Router做一個展示網站。網站按頁面劃分模組,每個頁面按section(部分)再劃分模組。培養自己的模組化思想。
2、用Vue+Vue-Router+Axios做一個帶請求的網站。把請求結果放在頁面上展示出來。鍛鍊請求介面的能力,瞭解前後端分離思想。
3、用Vue+Vue-Router+Axios+Vuex做一個能管理資料的網站。把請求放到Vuex中,用store管理資料。搞懂Vuex在開發中的幫助,提升專案開發能力。
做完上面三步你就已經入門Vue了,接下來就可以用這個最佳實踐來構建更優雅的程式碼、組織更簡潔的專案。
命令
pnpm create vue@latest
# 在專案目錄下
npm outdated # 檢視已過時的包
npm update # 更新包
基本語法
console.log('123') //ts裡用單引號?1
響應式資料
ref基本型別的響應式資料
- 其實
ref
接收的資料可以是:基本型別、物件型別。 - 若
ref
接收的是物件型別,內部其實也是呼叫了reactive
函式。
let xxx = ref(初始值)
// 一個RefImpl的例項物件,簡稱ref物件或ref,ref物件的value屬性是響應式的
注意:
JS
中運算元據需要:xxx.value
,但模板中不需要.value
,直接使用即可。- 對於
let name = ref('張三')
來說,name
不是響應式的,name.value
是響應式的
reactive:物件型別的響應式資料
基本型別不要用它,要用 ref
,否則報錯
let 響應式物件= reactive(源物件) //響應式物件
// 返回值:一個Proxy的例項物件,簡稱:響應式物件。
reactive
定義的響應式資料是“深層次”的。
reactive
重新分配一個新物件,會失去響應式
<template>
<h2>汽車資訊:一臺{{ car.brand }}汽車,價值{{ car.price }}萬</h2>
<h2>汽車資訊:一臺{{ car1.brand }}汽車,價值{{ car1.price }}萬</h2>
</template>
<script lang="ts" setup name="Person">
import { ref,reactive } from 'vue'
let car=reactive({brand:'賓士',price:100})
let car1=ref({brand:'本田',price:100})
function changeCar(){
car={brand:'奧迪',price:1}; //不會更新
car=reactive({brand:'奧迪',price:1}); //不會更新
Object.assign(car,{brand:'奧迪',price:1}); //可以操作reactive
car1.value={brand:'奧迪',price:1} //可以操作ref
}
</script>
computed
作用:根據已有資料計算出新資料(和 Vue2
中的 computed
作用一致)。
watch
- 作用:監視資料的變化(和
Vue2
中的watch
作用一致) - 特點:
Vue3
中的watch
只能監視以下四種資料:
ref
定義的資料。reactive
定義的資料。- 函式返回一個值(
getter
函式)。- 一個包含上述內容的陣列。
情況一:監視 ref
定義的【基本型別】資料:直接寫資料名即可,監視的是其 value
值的改變。
<template>
<h1>情況一:監視【ref】定義的【基本型別】資料</h1>
<h2>當前求和為:{{ sum }}</h2>
<button @click="changeSum">點我sum+1</button>
</template>
<script lang="ts" setup>
import {ref, watch} from 'vue'
let sum = ref(0)
function changeSum(){
sum.value+=1
}
// 監視,情況一:監視【ref】定義的【基本型別】資料
const stopWatch= watch(sum,(newValue,oldValue)=>{
console.log('sum變化了',newValue,oldValue)
if(newValue>=10){
stopWatch()
}
})
</script>
情況二
監視 ref
定義的【物件型別】資料:直接寫資料名,監視的是物件的【地址值】,若想監視物件內部的資料,要手動開啟深度監視。
注意:
- 若修改的是
ref
定義的物件中的屬性,newValue
和oldValue
都是新值,因為它們是同一個物件。 - 若修改整個
ref
定義的物件,newValue
是新值,oldValue
是舊值,因為不是同一個物件了。
情況三
監視 reactive
定義的【物件型別】資料,且預設開啟了深度監視。
情況四
監視 ref
或 reactive
定義的【物件型別】資料中的某個屬性,注意點如下:
- 若該屬性值不是【物件型別】,需要寫成函式形式。
- 若該屬性值是依然是【物件型別】,可直接編,也可寫成函式,建議寫成函式。
結論:監視的要是物件裡的屬性,那麼最好寫函式式,注意點:若是物件監視的是地址值,需要關注物件內部,需要手動開啟深度監視。
情況五
監視上述的多個資料
傳遞資料
props
生命週期
Vue 元件例項在建立時要經歷一系列的初始化步驟,在此過程中 Vue 會在合適的時機,呼叫特定的函式,從而讓開發者有機會在特定階段執行自己的程式碼,這些特定的函式統稱為:生命週期鉤子。
生命週期整體分為四個階段,分別是:建立、掛載、更新、銷燬,每個階段都有兩個鉤子,一前一後。
建立階段: setup
掛載階段: onBeforeMount 、 onMounted
更新階段: onBeforeUpdate 、 onUpdated
解除安裝階段: onBeforeUnmount 、 onUnmounted
路由
安裝路由router外掛
npm i vue-router
pinia
安裝pinia外掛
npm install pinia
// 操作src/main.ts
import {createPinia} from 'pinia' //引入pinia
const pinia = createPinia() // 建立pinia
app.use(pinia) //使用外掛
axios
安裝axios外掛
npm i axios