在vue中，使用setup是為了封裝重複使用；setup的設計是為了使用組合式api，當元件變得更大時，邏輯關注點的清單也會成長，會導致元件難以閱讀和理解，而透過setup可以將該部分抽離成函數，就可以不用關心該部分的邏輯了。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
vue3中的setup有什麼用?
setup的設計是為了使用組合式api
為什麼不使用先前的元件的選項
data、computed、methods、watch 組織邏輯在大多數情況下都有效。然而，當我們的元件變得更大時，邏輯關注點的清單也會成長。這可能會導致元件難以閱讀和理解，尤其是對於一開始就沒有編寫這些元件的人來說。而透過setup可以將該部分抽離成函數,讓其他開發者就不用關心該部分邏輯了.
#setup的在vue生命週期的位置
setup位於created 和beforeCreated只前,用於代替created 和beforeCreated,但是在setup函數裡不能訪問到this,另外setup內可以透過以下hook操作整個生命週期
#setup可以接收哪些參數?
setup可接受props,context,其中props由於是響應式資料,不能直接解構賦值,context不是響應式資料,可以直接解構賦值;setup必須傳回一個物件,一旦return,就可以像vue2.x的方式使用該屬性
props:['test']
setup(props,context){
//const {test} = props //错
const {test} = toRefs(props) //对
const { attrs, slots, emit }= context //对
return {
test
}
}優先權,如果data,props,setup都有一個同名屬性,setup傳回的該屬性優先順序最高,以執行以下程式碼為例,將顯示:test from son's setup
為了封裝復用性
工程或應用不能只談實現，還要考慮持續整合和多人協作，前端之前由於業務複雜度太低，所以你用組件化，或者撐死了上個全局狀態管理，能夠解決問題，最多也就費點手但是現在不太行了，前後端接口調用太浪費效率，所以非常有必要有更好的架構，讓前端能夠有完整的封裝多用性支撐（也就是完全編程能力），這樣才能hold 住集群中視圖服務的位置
【相關推薦： 《vue.js教程》】
以上是vue為什麼要使用setup的詳細內容。更多資訊請關注PHP中文網其他相關文章！
