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.js自定義tipOnce指令用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報文,前端采用vue進行接收,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-02-02
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開發(fā)中異步請求是非常常見的事情,比如遠程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
在vue項目中,有些我們會遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結匯總一下,需要的朋友可以參考下2023-08-08
props是Vue中最常見的父子通信方式,使用起來也比較簡單,下面這篇文章主要給大家介紹了關于Vue3中props和emit的使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
下面小編就為大家分享一篇vue 頁面加載進度條組件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
Vue表單驗證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實現(xiàn)表單元素校驗時，出現(xiàn)下拉框內(nèi)容選中后校驗不消失的異常校驗情形，這篇文章主要介紹了Vue表單驗證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09
vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章給大家介紹了vue中使用moment設置倒計時的方法,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02