新聞中心
#概覽
就變化而言,屬于高等級內(nèi)容:

十余年的南山網(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í)行。
- 在 3.x 中,函數(shù)式組件 2.x 的性能提升可以忽略不計,因此我們建議只使用有狀態(tài)的組件
- 函數(shù)式組件只能使用接收
props和context的普通函數(shù)創(chuàng)建 (即:slots,attrs,emit)。 - 非兼容變更:
functionalattribute 在單文件組件 (SFC)已被移除 - 非兼容變更:
{ functional: true }選項在通過函數(shù)創(chuàng)建組件已被移除
更多信息,請繼續(xù)閱讀!
#介紹
在 Vue 2 中,函數(shù)式組件有兩個主要用例:
- 作為性能優(yōu)化,因為它們的初始化速度比有狀態(tài)組件快得多
- 返回多個根節(jié)點
然而,在 Vue 3 中,有狀態(tài)組件的性能已經(jīng)提高到可以忽略不計的程度。此外,有狀態(tài)組件現(xiàn)在還包括返回多個根節(jié)點的能力。
因此,函數(shù)式組件剩下的唯一用例就是簡單組件,比如創(chuàng)建動態(tài)標題的組件。否則,建議你像平常一樣使用有狀態(tài)組件。
#2.x 語法
使用 組件,負責(zé)提供適當?shù)臉祟} (即:h1,h2,h3,等等),在 2.x 中,這可能是作為單個文件組件編寫的:
// Vue 2 函數(shù)式組件示例
export default {
functional: true,
props: ['level'],
render(h, { props, data, children }) {
return h(`h${props.level}`, data, children)
}
} 或者,對于喜歡在單個文件組件中使用 的用戶:
// Vue 2 函數(shù)式組件示例使用
#3.x 語法
#通過函數(shù)創(chuàng)建組件
現(xiàn)在在 Vue 3 中,所有的函數(shù)式組件都是用普通函數(shù)創(chuàng)建的,換句話說,不需要定義 { functional: true } 組件選項。
他們將接收兩個參數(shù):props 和 context。context 參數(shù)是一個對象,包含組件的 attrs,slots,和 emit property。
此外,現(xiàn)在不是在 render 函數(shù)中隱式提供 h,而是全局導(dǎo)入 h。
使用前面提到的 組件的示例,下面是它現(xiàn)在的樣子。
import { h } from 'vue'
const DynamicHeading = (props, context) => {
return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']
export default DynamicHeading
#單文件組件 (SFC)
在 3.x 中,有狀態(tài)組件和函數(shù)式組件之間的性能差異已經(jīng)大大減少,并且在大多數(shù)用例中是微不足道的。因此,在 SFCs 上使用 functional 的開發(fā)人員的遷移路徑是刪除該 attribute,并將 props 的所有引用重命名為 $props,將 attrs 重命名為 $attrs。
使用之前的 示例,下面是它現(xiàn)在的樣子。
主要的區(qū)別在于:
functionalattribute 在中移除listeners現(xiàn)在作為$attrs的一部分傳遞,可以將其刪除
#下一步
有關(guān)新函數(shù)式組件的用法和對渲染函數(shù)的更改的詳細信息,見:
- 遷移:渲染函數(shù)
- 指南:渲染函數(shù)
名稱欄目:創(chuàng)新互聯(lián)VUE3教程:Vue3.0函數(shù)式組件
標題鏈接:http://www.dlmjj.cn/article/cdijipd.html


咨詢
建站咨詢
