Vue3中的setup執(zhí)行時(shí)機(jī)與注意點(diǎn)說明
setup執(zhí)行時(shí)機(jī)與注意點(diǎn)
setup執(zhí)行時(shí)機(jī)在beforeCreate之前
在setup中是不能使用data和methods，因?yàn)檫€沒初始化好
由于不能再setup函數(shù)中使用data和methods，所以Vue為了避免我們錯(cuò)誤的使用，它直接將setup函數(shù)中的this修改成undefined.
setup只能同步，不能異步
Vue3.0 setup()函數(shù)用法
setup()函數(shù)作為在組件內(nèi)部使用組合API的入口點(diǎn)
setup()函數(shù)在初始的prop解析后，組件實(shí)例創(chuàng)建之前被調(diào)用。對(duì)于組件的生命周期鉤子，setup()函數(shù)在beforeCreate鉤子之前調(diào)用。
如果setup()函數(shù)返回一個(gè)對(duì)象，該對(duì)象上的屬性將被合并到組件模板的渲染上下文中。如：
setup() {
? // 為目標(biāo)對(duì)象創(chuàng)建一個(gè)響應(yīng)式對(duì)象
? const state = Vue.reactive((count: 0})
? function increment() {
? ? state.count++
? }
// 返回一個(gè)對(duì)象，該對(duì)象上的屬性可以在模板中使用
? return {
? ? state,
? ? increment
? }
}setup()函數(shù)返回的對(duì)象有兩個(gè)屬性
一個(gè)是響應(yīng)式對(duì)象（即為原始對(duì)象創(chuàng)建的代理對(duì)象），另一個(gè)是函數(shù)。在DOM模板中，可以世界使用這兩屬性，如：
<view @click="addClick">count值：{{state.count}}</view>setup()函數(shù)可以接收兩個(gè)可選的參數(shù)
第一個(gè)是已解析的props。通過該參數(shù)可以訪問在props選項(xiàng)中定義的prop，如：
app.component('ButtonItem', {
? props: ['buttonTitle'],
? setup(props) {
? ?console.log(props.buttonTitle)?
? }
})setup()函數(shù)接收的第二個(gè)可選的參數(shù)是一個(gè)context對(duì)象
該對(duì)象是一個(gè)普通的JavaScript對(duì)象，不是響應(yīng)式的，可以完全的使用ES6的對(duì)象解構(gòu)語(yǔ)法對(duì)context進(jìn)行解構(gòu)，另外還公開了3個(gè)組件屬性，如：
const component = {
? setup(props, context) {
? ? // 屬性（非響應(yīng)式對(duì)象）
? ? console.log(context.attrs)
? ? // 插槽（非響應(yīng)式對(duì)象）
? ? console.log(context.slots)
? ? // 發(fā)出的事件（方法）
? ? console.log(context.emit)
? }
}當(dāng)setup()和選項(xiàng)API一起使用
在setup()函數(shù)內(nèi)部不要使用this，因?yàn)閟etup()函數(shù)是在選項(xiàng)被解析之前調(diào)用的，在setup()函數(shù)內(nèi)不能訪問data、computed和methods組件選項(xiàng)。如下代碼是錯(cuò)誤范例：
setup() {
? function onClick() {
? ? ? console.log(this) // 并不是預(yù)期的this
? }
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報(bào)文,前端采用vue進(jìn)行接收,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開發(fā)中異步請(qǐng)求是非常常見的事情,比如遠(yuǎn)程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
解決Vue數(shù)據(jù)更新了但頁(yè)面沒有更新的問題
在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場(chǎng)景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08
props是Vue中最常見的父子通信方式,使用起來也比較簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于Vue3中props和emit的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
下面小編就為大家分享一篇vue 頁(yè)面加載進(jìn)度條組件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue項(xiàng)目實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
Vue表單驗(yàn)證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實(shí)現(xiàn)表單元素校驗(yàn)時(shí)，出現(xiàn)下拉框內(nèi)容選中后校驗(yàn)不消失的異常校驗(yàn)情形，這篇文章主要介紹了Vue表單驗(yàn)證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09
vue打包通過image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中使用moment設(shè)置倒計(jì)時(shí)的方法
這篇文章給大家介紹了vue中使用moment設(shè)置倒計(jì)時(shí)的方法,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02