vue3開發文件

yuey6670發表於2024-03-09
Vue

技術要求

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只能監視以下四種資料：
  1. ref定義的資料。
  2. reactive定義的資料。
  3. 函式返回一個值（getter函式）。
  4. 一個包含上述內容的陣列。

情況一：監視 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定義的【物件型別】資料中的某個屬性，注意點如下：

  1. 若該屬性值不是【物件型別】，需要寫成函式形式。
  2. 若該屬性值是依然是【物件型別】，可直接編，也可寫成函式，建議寫成函式。

結論：監視的要是物件裡的屬性，那麼最好寫函式式，注意點：若是物件監視的是地址值，需要關注物件內部，需要手動開啟深度監視。

情況五

監視上述的多個資料

傳遞資料

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

相關文章