vue中setup有什么作用

本篇內(nèi)容介紹了“vue中setup有什么作用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

在vue中，使用setup是為了封裝復用；setup的設計是為了使用組合式api，當組件變得更大時，邏輯關注點的列表也會增長，會導致組件難以閱讀和理解，而通過setup可以將該部分抽離成函數(shù)，就可以不用關心該部分的邏輯了。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue為什么使用setup

• vue3中的setup有什么用?

setup的設計是為了使用組合式api

• 為什么不用之前的組件的選項

data、computed、methods、watch 組織邏輯在大多數(shù)情況下都有效。然而，當我們的組件變得更大時，邏輯關注點的列表也會增長。這可能會導致組件難以閱讀和理解，尤其是對于那些一開始就沒有編寫這些組件的人來說。而通過setup可以將該部分抽離成函數(shù),讓其他開發(fā)者就不用關心該部分邏輯了.

• setup的在vue生命周期的位置

setup位于created 和beforeCreated只前,用于代替created 和beforeCreated,但是在setup函數(shù)里不能訪問到this,另外setup內(nèi)可以通過以下hook操作整個生命周期

• setup可以接收哪些參數(shù)?

setup可接受props,context,其中props由于是響應式數(shù)據(jù),不能直接解構賦值,context不是響應式數(shù)據(jù),可以直接解構賦值;setup必須返回一個對象,一旦return,就可以像vue2.x的方式使用該屬性

props:['test']
setup(props,context){
//const {test} = props //錯
const {test} = toRefs(props) //對
const { attrs, slots, emit }= context //對
  return {
    test
  }
}

優(yōu)先級,如果data,props,setup都有一個同名屬性,setup返回的該屬性優(yōu)先級最高,以執(zhí)行以下代碼為例,將顯示:test from son's setup

為了封裝復用性

工程或者應用不能只談實現(xiàn)，還要考慮持續(xù)集成和多人協(xié)作，前端之前由于業(yè)務復雜度太低，所以你用組件化，或者撐死了上個全局狀態(tài)管理，能夠解決問題，最多也就費點手但是現(xiàn)在不太行了，前后端接口調(diào)用太浪費效率，所以非常有必要有更好的架構，讓前端能夠有完整的封裝復用性支撐（也就是完全編程能力），這樣才能 hold 住集群中視圖服務的位置

“vue中setup有什么作用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！