Vue3的setup執(zhí)行時機是什么

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

setup執(zhí)行時機與注意點

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

在setup中是不能使用data和methods，因為還沒初始化好

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

setup只能同步，不能異步。【推薦：vue視頻教程】

Vue3.0 setup()函數(shù)用法

setup()函數(shù)作為在組件內(nèi)部使用組合API的入口點

setup()函數(shù)在初始的prop解析后，組件實例創(chuàng)建之前被調(diào)用。對于組件的生命周期鉤子，setup()函數(shù)在beforeCreate鉤子之前調(diào)用。

如果setup()函數(shù)返回一個對象，該對象上的屬性將被合并到組件模板的渲染上下文中。如：

setup() {
  // 為目標對象創(chuàng)建一個響應式對象
  const state = Vue.reactive((count: 0})
  function increment() {
    state.count++
  }
// 返回一個對象，該對象上的屬性可以在模板中使用
  return {
    state,
    increment
  }
}

setup()函數(shù)返回的對象有兩個屬性

一個是響應式對象（即為原始對象創(chuàng)建的代理對象），另一個是函數(shù)。在DOM模板中，可以世界使用這兩屬性，如：

<view @click="addClick">count值：{{state.count}}</view>

setup()函數(shù)可以接收兩個可選的參數(shù)

第一個是已解析的props。通過該參數(shù)可以訪問在props選項中定義的prop，如：

app.component('ButtonItem', {
  props: ['buttonTitle'],
  setup(props) {
   console.log(props.buttonTitle) 
  }
})

setup()函數(shù)接收的第二個可選的參數(shù)是一個context對象

該對象是一個普通的JavaScript對象，不是響應式的，可以完全的使用ES6的對象解構(gòu)語法對context進行解構(gòu)，另外還公開了3個組件屬性，如：

const component = {
  setup(props, context) {
    // 屬性（非響應式對象）
    console.log(context.attrs)
    // 插槽（非響應式對象）
    console.log(context.slots)
    // 發(fā)出的事件（方法）
    console.log(context.emit)
  }
}

當setup()和選項API一起使用

在setup()函數(shù)內(nèi)部不要使用this，因為setup()函數(shù)是在選項被解析之前調(diào)用的，在setup()函數(shù)內(nèi)不能訪問data、computed和methods組件選項。如下代碼是錯誤范例：

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

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