Vue3中setup執(zhí)行時(shí)機(jī)是什么及有哪些注意點(diǎn)

本篇內(nèi)容主要講解“Vue3中setup執(zhí)行時(shí)機(jī)是什么及有哪些注意點(diǎn)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue3中setup執(zhí)行時(shí)機(jī)是什么及有哪些注意點(diǎn)”吧!

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只能同步，不能異步

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)，另外還公開(kāi)了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
  }
}

到此，相信大家對(duì)“Vue3中setup執(zhí)行時(shí)機(jī)是什么及有哪些注意點(diǎn)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！