本文小編為大家詳細(xì)介紹“Vue3的setup執(zhí)行時(shí)機(jī)是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue3的setup執(zhí)行時(shí)機(jī)是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司主營(yíng)井陘網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā),井陘h5成都微信小程序搭建,井陘網(wǎng)站營(yíng)銷推廣歡迎井陘等地區(qū)企業(yè)咨詢

setup執(zhí)行時(shí)機(jī)與注意點(diǎn)

setup執(zhí)行時(shí)機(jī)在beforeCreate之前

在setup中是不能使用data和methods，因?yàn)檫€沒(méi)初始化好

由于不能再setup函數(shù)中使用data和methods，所以Vue為了避免我們錯(cuò)誤的使用，它直接將setup函數(shù)中的this修改成undefined.

setup只能同步，不能異步?！就扑]：vue視頻教程】

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。通過(guò)該參數(shù)可以訪問(wèn)在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)不能訪問(wèn)data、computed和methods組件選項(xiàng)。如下代碼是錯(cuò)誤范例：

setup() {
  function onClick() {
      console.log(this) // 并不是預(yù)期的this
  }
}

讀到這里，這篇“Vue3的setup執(zhí)行時(shí)機(jī)是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：Vue3的setup執(zhí)行時(shí)機(jī)是什么
網(wǎng)站網(wǎng)址：http://aaarwkj.com/article46/peeehg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、ChatGPT、企業(yè)建站、定制網(wǎng)站、軟件開發(fā)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)