Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說(shuō)明
setup執(zhí)行時(shí)機(jī)與注意點(diǎn)
setup執(zhí)行時(shí)機(jī)在beforeCreate之前
在setup中是不能使用data和methods，因?yàn)檫€沒初始化好
由于不能再setup函數(shù)中使用data和methods，所以Vue為了避免我們錯(cuò)誤的使用，它直接將setup函數(shù)中的this修改成undefined.
setup只能同步，不能異步
Vue3.0 setup()函數(shù)用法
setup()函數(shù)作為在組件內(nèi)部使用組合API的入口點(diǎn)
setup()函數(shù)在初始的prop解析后，組件實(shí)例創(chuàng)建之前被調(diào)用。對(duì)于組件的生命周期鉤子，setup()函數(shù)在beforeCreate鉤子之前調(diào)用。
如果setup()函數(shù)返回一個(gè)對(duì)象，該對(duì)象上的屬性將被合并到組件模板的渲染上下文中。如：
setup() {
? // 為目標(biāo)對(duì)象創(chuàng)建一個(gè)響應(yīng)式對(duì)象
? const state = Vue.reactive((count: 0})
? function increment() {
? ? state.count++
? }
// 返回一個(gè)對(duì)象，該對(duì)象上的屬性可以在模板中使用
? return {
? ? state,
? ? increment
? }
}setup()函數(shù)返回的對(duì)象有兩個(gè)屬性
一個(gè)是響應(yīng)式對(duì)象（即為原始對(duì)象創(chuàng)建的代理對(duì)象），另一個(gè)是函數(shù)。在DOM模板中，可以世界使用這兩屬性，如：
<view @click="addClick">count值：{{state.count}}</view>setup()函數(shù)可以接收兩個(gè)可選的參數(shù)
第一個(gè)是已解析的props。通過該參數(shù)可以訪問在props選項(xiàng)中定義的prop，如：
app.component('ButtonItem', {
? props: ['buttonTitle'],
? setup(props) {
? ?console.log(props.buttonTitle)?
? }
})setup()函數(shù)接收的第二個(gè)可選的參數(shù)是一個(gè)context對(duì)象
該對(duì)象是一個(gè)普通的JavaScript對(duì)象，不是響應(yīng)式的，可以完全的使用ES6的對(duì)象解構(gòu)語(yǔ)法對(duì)context進(jìn)行解構(gòu)，另外還公開了3個(gè)組件屬性，如：
const component = {
? setup(props, context) {
? ? // 屬性（非響應(yīng)式對(duì)象）
? ? console.log(context.attrs)
? ? // 插槽（非響應(yīng)式對(duì)象）
? ? console.log(context.slots)
? ? // 發(fā)出的事件（方法）
? ? console.log(context.emit)
? }
}當(dāng)setup()和選項(xiàng)API一起使用
在setup()函數(shù)內(nèi)部不要使用this，因?yàn)閟etup()函數(shù)是在選項(xiàng)被解析之前調(diào)用的，在setup()函數(shù)內(nèi)不能訪問data、computed和methods組件選項(xiàng)。如下代碼是錯(cuò)誤范例：
setup() {
? function onClick() {
? ? ? console.log(this) // 并不是預(yù)期的this
? }
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)
這篇文章主要介紹了vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue+iview動(dòng)態(tài)渲染表格的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要介紹了Vue中SSR的作用及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue項(xiàng)目的屏幕自適應(yīng)多個(gè)方案總結(jié)
最近在用VUE寫大屏頁(yè)面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目的屏幕自適應(yīng)多個(gè)方案的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03
一次VUE項(xiàng)目中遇到XSS攻擊的實(shí)戰(zhàn)記錄
XSS?攻擊是頁(yè)面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項(xiàng)目中遇到XSS攻擊的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
本文通過實(shí)例代碼介紹對(duì)el-table表格的表頭操作方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
vue主動(dòng)刷新頁(yè)面及列表數(shù)據(jù)刪除后的刷新實(shí)例
今天小編就為大家分享一篇vue主動(dòng)刷新頁(yè)面及列表數(shù)據(jù)刪除后的刷新實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue.js中關(guān)于“{{}}”的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09