一、setup

生命周期

1、執行時機：會在beforeCreate之前執行，內部無法訪問this

2、setup 包含的生命周期
onBeforeMount——掛載開始前調用
onMount——掛載后調用
onBeforeUpdate——當響應數據改變，且重新渲染前調用
onUpdated——重新渲染后調用
onBeforeUnmount——Vue實例銷毀前調用
onUnmounted——實例銷毀后調用
onActivated——當keep-alive組件被激活時調用
onDeactivated——當keep-alive組件取消激活時調用
onErrorCaptured——從子組件中捕獲錯誤時調用

export default { name: "hello", setup(msg) { console.log(msg); return { name:"Mr liu" }; }, }; }

二、數據綁定 / 響應式數據

在vue3中setup默認返回的普通數據不是響應的，如果希望數據是響應式的，有4種方式

1、ref

ref 一般用于簡單類型數據。ref主要是用于定義基本數據類型的數據并保證響應式能力，也可以用于對象或數據

使用ref()函數時，通常要注意兩點：
1）在setup中修改值和獲取值的時候，需要.value
2）在模板中使用ref申明的響應式數據，可以省略.value，模板使用{{變量}}取值

<template><div>{{ ebooks }}</div> </template><script> import { ref } from 'vue'; export default {name: 'App',setup(){const ebooks = ref();ebooks.value = 1;return{ebooks}} } </script>

2、reactive

reactive是一個函數，可以用于定義一個復雜數據類型

// 定義數組 let list:any = reactive([]) import { reactive, toRef } from 'vue'; setup(){const ebooks1=reactive({books:[]})ebooks1.books= data.list;return{ebooks1: ebooks,ebooks2:toRef(ebooks1,"books")} }

3、toRef

當我們在模板中渲染數據時，不希望由前綴的時候可以使用組合-toRef()
toRef()是函數，轉換響應式對象中某個屬性為單獨響應式數據，并且值是關聯的

<template><div>{{ ebooks }}{{ ebooks2 }} // books列表</div> </template><script> import { reactive, toRef } from 'vue'; export default {name: 'App',setup(){const ebooks1=reactive({books:[]})ebooks1.books= data.list;return{ebooks1: ebooks,ebooks2: toRef(ebooks1,"books")}} }

4、toRefs

toRefs函數可以定義轉換響應式中所有屬性為 響應式數據，通常用于結構reactive定義的對象，轉換響應式對象中所有屬性（也可以是一部分）為單獨響應式數據，對象成為普通對象，并且值是關聯的

<template><div>{{ msg }}</div><div>{{ info }}</div> </template><script> import { reactive, toRefs } from 'vue' export default {name: 'App',setup() {const obj = reactive({msg: 'hello',info: 'hi'})const { msg, info } = toRefs(obj)const hClick = () => {msg.value = 'nihao'info.vaule = 'hihi'}return { msg, info, hClick }} } </script>

對比：

• ref 和 reactive定義普通類型響應式數據，顯然使用reactive比較麻煩，
• ref比較麻煩的是，使用變量的話，不管是獲取還是使用的話都需要加上.value；

注意：

• 項目實際開發中必須統一，不能既使用reactive又使用ref

三、vue3 路由跳轉

1、useRouter
import { useRouter } from ‘vue-router’
setup(){
const router = useRouter()
router.push(’/corporateTransfer’)
}

2、傳參：
// 字符串
router.push(‘home’)
// 對象
router.push({ path: ‘home’ })
// 命名的路由
router.push({ name: ‘user’, params: { userId: ‘123’ }})
// 帶查詢參數，變成 /register?userId=123

const userId = ‘123’
router.push({ name: ‘user’, params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
// 這里的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> /user
————————————————
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

注意：

• 如果提供了 path，params 會被忽略，但query 沒有這種情況，此時需要提供路由的 name 或手寫完整的帶有參數的 path
• 上述規則同樣適用于 router-link 組件的 to 屬性
• 如果目的地和當前路由相同，只有參數發生了改變 (比如從一個用戶資料到另一個 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來響應這個變化

總結

以上是生活随笔為你收集整理的vue3开发实践笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。