Vue3中的setup執(zhí)行時機與注意點說明
setup執(zhí)行時機與注意點
setup執(zhí)行時機在beforeCreate之前
在setup中是不能使用data和methods，因為還沒初始化好
由于不能再setup函數(shù)中使用data和methods，所以Vue為了避免我們錯誤的使用，它直接將setup函數(shù)中的this修改成undefined.
setup只能同步，不能異步
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的對象解構語法對context進行解構，另外還公開了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
? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue-pdf插件實現(xiàn)pdf文檔預覽方式(自動分頁預覽)
這篇文章主要介紹了vue-pdf插件實現(xiàn)pdf文檔預覽方式(自動分頁預覽)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細介紹了vue+iview動態(tài)渲染表格的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章主要介紹了Vue中SSR的作用及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
最近在用VUE寫大屏頁面,遇到屏幕自適應問題,下面這篇文章主要給大家介紹了關于vue項目的屏幕自適應多個方案的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue-cli項目獲取本地json文件數(shù)據(jù)的實例
下面小編就為大家分享一篇Vue-cli項目獲取本地json文件數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項目中遇到XSS攻擊的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
本文通過實例代碼介紹對el-table表格的表頭操作方法,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例
今天小編就為大家分享一篇vue主動刷新頁面及列表數(shù)據(jù)刪除后的刷新實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue.js中關于“{{}}”的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09