vue2中有data、computed、method等，我們有時候尋找乙個變數或者函式就需要翻閱整段**。vue3提出了組合式api，並且提出了可以使用組合式api的地方—setup。
>
>
>
}p>
@click
="add"
>
加1button
>
div>
template
>
>
import
from
'vue'
;export
default
return;}
}script
>
setup元件選項在建立元件之前執行，此時尚未建立元件例項，所以setup中並沒有this，所以在這裡除了props和context的屬性之外，都無法訪問元件中宣告的任何屬性。
setup接受props和context。
props:},
setup
(props)
return
// 這裡返回的任何內容都可以用於元件的其餘部分
}
setup內部可以呼叫生命週期鉤子：
beforecreatenot needed*
creatednot needed*
beforemountonbeforemount
mountedonmounted
beforeupdateonbeforeupdate
updatedonupdated
beforeunmountonbeforeunmount
unmountedonunmounted
errorcapturedonerrorcaptured
rendertrackedonrendertracked
rendertriggeredonrendertriggered
在setup中可以使用provider和inject：
import
from
'vue'
;// ...
setup()
)}
import
from
'vue'
;// ...
setup()
}
provider和inject提供響應式，確保（祖）父元件資料改變時，可以影響到子元件：
import
from
'vue'
// ...
setup()
)provide
('location'
, location)
provide
('geolocation'
, geolocation)
}
如果想要改變geolocation，建議在提供的元件內部宣告乙個方法讓其更改：
// （祖）父元件
methods:
}
setup()
)const
updatelocation=(
)=>
provide
('location'
, location)
provide
('geolocation'
, geolocation)
provide
('updatelocation'
, updatelocation)
}
// 子元件
import
from
'vue'
export
default
}}
provide傳遞的資料不會被注入的元件更改，可以使用readonly：
provide
('location'
,readonly
(location)
)provide
('geolocation'
,readonly
(geolocation)
)
ctx屬性獲得當前上下文，這樣就可以在setup中使用router和vuex了（$router和$store)。
但是這個方法只能在setup和生命週期中使用。
p.s. 在setup中不能使用async和await
vue3學習筆記
vue3 1.context.emit update xx props.xx 可 v model xx更新xx的值 個人記憶，雙向繫結 需要雙向改變的值 代替 vue2 sync 2.元件上繫結的事件預設是繫結第一層，可使用inheritattrs false 取消預設，在需要繼承的屬性的標籤使用v...
vue3學習總結
v model 2.x語法 title.sync oldvalue childcomponent this emit update title newvalue 3.x語法v model title oldvalue childcomponent 所有v model不到引數，一定要改變道具和事件名稱...
Vue3 的初次學習
vue3 出來了，真是乙個激動人心的時刻，可是我又要學習了，開心 bushi 對於製作原型或學習，你可以這樣使用最新版本 src script vue 提供了乙個官方的 cli，為單頁面應用 spa 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries included 的構建設定。只...