建站
咨詢
售后
建站咨詢
新聞中心
本節(jié)使用單文件組件代碼示例的語法
10余年的長壽網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整長壽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“長壽網(wǎng)站設(shè)計”,“長壽網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
本指南假定你已經(jīng)閱讀了組合式 API 簡介和響應(yīng)性原理。如果你不熟悉組合式 API，請先閱讀這篇文章。
#參數(shù)
使用 setup 函數(shù)時，它將接受兩個參數(shù)：
propscontext
讓我們更深入地研究如何使用每個參數(shù)。
#Props
setup 函數(shù)中的第一個參數(shù)是 props。正如在一個標準組件中所期望的那樣，setup 函數(shù)中的 props 是響應(yīng)式的，當(dāng)傳入新的 prop 時，它將被更新。
// MyBook.Vue
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}WARNING
但是，因為 props 是響應(yīng)式的，你不能使用 ES6 解構(gòu)，因為它會消除 prop 的響應(yīng)性。
如果需要解構(gòu) prop，可以通過使用 setup 函數(shù)中的 toRefs 來安全地完成此操作。
// MyBook.vue
import { toRefs } from 'vue'
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
}#上下文
傳遞給 setup 函數(shù)的第二個參數(shù)是 context。context 是一個普通的 JavaScript 對象，它暴露三個組件的 property：
// MyBook.vue
export default {
setup(props, context) {
// Attribute (非響應(yīng)式對象)
console.log(context.attrs)
// 插槽 (非響應(yīng)式對象)
console.log(context.slots)
// 觸發(fā)事件 (方法)
console.log(context.emit)
}
} context 是一個普通的 JavaScript 對象，也就是說，它不是響應(yīng)式的，這意味著你可以安全地對 context 使用 ES6 解構(gòu)。
// MyBook.vue
export default {
setup(props, { attrs, slots, emit }) {
...
}
} attrs 和 slots 是有狀態(tài)的對象，它們總是會隨組件本身的更新而更新。這意味著你應(yīng)該避免對它們進行解構(gòu)，并始終以 attrs.x 或 slots.x 的方式引用 property。請注意，與 props 不同，attrs 和 slots 是非響應(yīng)式的。如果你打算根據(jù) attrs 或 slots 更改應(yīng)用副作用，那么應(yīng)該在 onUpdated 生命周期鉤子中執(zhí)行此操作。
#訪問組件的 property
執(zhí)行 setup 時，組件實例尚未被創(chuàng)建。因此，你只能訪問以下 property：
propsattrsslotsemit
換句話說，你將無法訪問以下組件選項：
datacomputedmethods
#結(jié)合模板使用
如果 setup 返回一個對象，則可以在組件的模板中像傳遞給 setup 的 props property 一樣訪問該對象的 property：
{{ readersNumber }} {{ book.title }}
注意，從 setup 返回的 refs 在模板中訪問時是被自動解開的，因此不應(yīng)在模板中使用 .value。
#使用渲染函數(shù)
setup 還可以返回一個渲染函數(shù)，該函數(shù)可以直接使用在同一作用域中聲明的響應(yīng)式狀態(tài)：
// MyBook.vue
import { h, ref, reactive } from 'vue'
export default {
setup() {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// Please note that we need to explicitly expose ref value here
return () => h('div', [readersNumber.value, book.title])
}
}#使用 this
在 setup() 內(nèi)部，this 不會是該活躍實例的引用，因為 setup() 是在解析其它組件選項之前被調(diào)用的，所以 setup() 內(nèi)部的 this 的行為與其它選項中的 this 完全不同。這在和其它選項式 API 一起使用 setup() 時可能會導(dǎo)致混淆。
網(wǎng)站標題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0組合式APISetup
鏈接分享：http://fisionsoft.com.cn/article/cojdoge.html
