Vue3中setup運行時機介紹

在 Vue3 中,直接寫在 <script setup>...</script> 中的代碼運行時機可以分為以下幾個關鍵階段:


一、執行順序層級

Vue ScriptSetup Lifecycle 解析 <script setup> 注冊響應式變量/組合函數 觸發 beforeCreate 執行模板編譯 觸發 created 執行 mounted Vue ScriptSetup Lifecycle

二、具體運行階段

1. 組件實例初始化前
  • 執行時機:在 Vue 實例化過程中,早于 beforeCreate 生命周期鉤子
  • 典型行為
    <script setup>
    // 以下代碼會先于 beforeCreate 執行
    import { ref } from 'vue'
    const count = ref(0) // 響應式變量初始化
    console.log('ScriptSetup 執行') // 會在此階段輸出
    </script>
    
2. 響應式系統構建
  • 依賴收集:所有在 <script setup> 中聲明的 ref/reactive 變量會被立即初始化
  • 示例驗證
    <script setup>
    const message = ref('Hello')
    console.log(message.value) // 輸出 "Hello"
    </script>
    
3. 生命周期鉤子對比
代碼位置執行時機示例
<script setup>beforeCreate 之前初始化響應式變量、導入模塊
setup() 函數beforeCreate 之前(等同于 <script setup>
onMounted 鉤子組件掛載完成后訪問 DOM 元素
created 鉤子beforeCreate 之后不能訪問 DOM

三、異步操作的特殊處理

1. 異步代碼執行時機
<script setup>
// 以下異步代碼會立即執行(在實例化前)
const fetchData = async () => {const res = await fetch('/api/data')data.value = await res.json()
}
fetchData() // 立即發起請求
</script>
2. 與生命周期的關系
  • 請求會在 beforeCreate 前發起,但響應處理會在組件掛載后完成
  • 典型場景
    <script setup>
    import { ref, onMounted } from 'vue'const data = ref(null)// 立即執行的異步請求
    fetchData().then(res => {data.value = res // 在 mounted 鉤子前可能已賦值
    })onMounted(() => {console.log(data.value) // 可能已有值(取決于請求速度)
    })
    </script>
    

四、與選項式 API 的對比

特性<script setup>選項式 API (setup() 函數)
執行時機beforeCreatebeforeCreate
響應式聲明ref/reactive 直接聲明需要返回對象
代碼組織更簡潔,無 this 上下文需要 this 訪問實例
編譯優化Tree-shaking 友好需要手動優化

五、關鍵注意事項

1. 不要訪問 DOM
<script setup>
// ? 錯誤:此時 DOM 尚未創建
const element = document.getElementById('app')
</script>
2. 異步數據獲取
<script setup>
// ? 正確:在 setup 階段發起請求
const data = ref(null)fetch('/api/data').then(res => {data.value = res.json()
})
</script>
3. 響應式變量初始化
<script setup>
// ? 正確:響應式變量在實例化前初始化
const count = ref(0)
</script>

六、底層原理

  1. 編譯階段

    • Vue 編譯器將 <script setup> 轉換為 setup() 函數
    • 所有頂層代碼被提升到 setup() 最頂部
  2. 運行時階段

    • 在組件實例化流程中,先執行 <script setup> 代碼
    • 再依次觸發 beforeCreatecreatedbeforeMount 等生命周期

總結

  • 運行時機<script setup> 中的代碼在 組件實例化前 執行(早于 beforeCreate
  • 核心特性
    • 響應式變量立即初始化
    • 頂級代碼立即執行
    • 無法訪問 DOM 元素
  • 最佳實踐
    • 用于初始化數據、導入模塊、注冊組合函數
    • 異步操作需注意執行順序
    • 避免在此階段直接操作 DOM

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/80126.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/80126.shtml
英文地址,請注明出處:http://en.pswp.cn/web/80126.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Ubuntu快速安裝Python3.11及多版本管理

之前文章和大家分享過&#xff0c;將會出一篇專欄&#xff08;從電腦裝ubuntu系統&#xff0c;到安裝ubuntu的常用基礎軟件&#xff1a;jdk、python、node、nginx、maven、supervisor、minio、docker、git、mysql、redis、postgresql、mq、ollama等&#xff09;&#xff0c;目前…

裸金屬服務器和云服務器之間的差別

裸金屬服務器能夠直接在硬件上運行&#xff0c;不需要額外的虛化層&#xff0c;讓每個應用程序或者是服務都能夠在實際的硬件上運行&#xff0c;不需要和其他虛擬服務器來共享資源&#xff1b;而云服務器作為一種虛擬服務器&#xff0c;是通過虛擬化技術為企業提供一個獨立的計…

C++ 中的幾種鎖機制整理

1. 互斥鎖&#xff08;std::mutex&#xff09; ? 簡介 最常用的線程同步工具。保證同一時間只能有一個線程訪問臨界區。 ? 使用方式 #include <mutex>std::mutex mtx;void safeFunction() {std::lock_guard<std::mutex> lock(mtx);// 臨界區代碼 }? 優點 簡…

Graph Representation Learning【圖最短路徑優化/Node2vec/Deepwalk】

文章目錄 Q1&#xff1a;網絡性質&#xff1a;1.數據讀取與鄰接表構建&#xff1a;2.基本特征和連通性&#xff1a; 算法思路&#xff1a;1. 廣度優先搜索&#xff08;BFS&#xff09;標記前驅:2. 回溯生成所有最短路徑: 實驗結果&#xff1a;復雜度分析&#xff1a; Q2&#x…

MATLAB中的概率分布生成:從理論到實踐

MATLAB中的概率分布生成&#xff1a;從理論到實踐 引言 MATLAB作為一款強大的科學計算軟件&#xff0c;在統計分析、數據模擬和概率建模方面提供了豐富的功能。本文將介紹如何使用MATLAB生成各種常見的概率分布&#xff0c;包括均勻分布、正態分布、泊松分布等&#xff0c;并…

經典算法 (A/B) mod C

(A/B) mod C 問題描述 求(A/B)%C&#xff0c;但由于A和B實在太大了&#xff0c;我們只給出A % C&#xff0c;B % C。 (我們保證給定的A必能被B整除&#xff0c;且gcd(B,C) 1)。 輸入描述 輸入一行三個整數&#xff0c;分別是A % C&#xff0c;B % C&#xff0c;C。 輸出…

大數據技術的主要方向及其應用詳解

文章目錄 一、大數據技術概述二、大數據存儲與管理方向1. 分布式文件系統2. NoSQL數據庫3. 數據倉庫技術 三、大數據處理與分析方向1. 批處理技術2. 流處理技術3. 交互式分析4. 圖計算技術 四、大數據機器學習方向1. 分布式機器學習2. 深度學習平臺3. 自動機器學習(AutoML) 五、…

Deeper and Wider Siamese Networks for Real-Time Visual Tracking

現象&#xff1a; the backbone networks used in Siamese trackers are relatively shallow, such as AlexNet , which does not fully take advantage of the capability of modern deep neural networks. direct replacement of backbones with existing powerful archite…

ubuntu22.04卸載vscode

方法 1&#xff1a;通過 Snap 卸載 VSCode 如果你是通過 Snap 安裝的 VSCode&#xff08;Ubuntu 22.04 默認推薦方式&#xff09;&#xff0c;按照以下步驟卸載&#xff1a; 檢查是否通過 Snap 安裝&#xff1a; bash snap list | grep code如果輸出顯示 code&#xff0c;說明…

OpenCV 背景建模詳解:從原理到實戰

在計算機視覺領域&#xff0c;背景建模是一項基礎且重要的技術&#xff0c;它能夠從視頻流中分離出前景目標&#xff0c;廣泛應用于運動目標檢測、視頻監控、人機交互等場景。OpenCV 作為計算機視覺領域最受歡迎的開源庫之一&#xff0c;提供了多種高效的背景建模算法。本文將深…

Android native崩潰問題分析

最近在做NDK項目的時候&#xff0c;出現了啟動應用就崩潰了&#xff0c;崩潰日志如下&#xff1a; 10:41:04.743 A Build fingerprint: samsung/g0qzcx/g0q:13/TP1A.220624.014/S9060ZCU4CWH1:user/release-keys 10:41:04.743 A Revision: 12 10:41:04.743 A ABI: arm64…

【Shell的基本操作】

文章目錄 一、實驗目的二、實驗環境三、實驗內容3.1 Shell變量與腳本基礎3.2 定制終端提示符&#xff08;PS1變量&#xff09;3.3 文件查找與類型確認&#xff08;find命令&#xff09;3.4 管道命令實戰&#xff08;用戶登錄統計&#xff09;3.5 交互式備份壓縮腳本 四、總結4.…

快速選擇算法:優化大數據中的 Top-K 問題

在處理海量數據時&#xff0c;經常會遇到這樣的需求&#xff1a;找出數據中最大的前 K 個數&#xff0c;而不必對整個數據集進行排序。這種場景下&#xff0c;快速選擇算法&#xff08;Quickselect&#xff09;就成了一個非常高效的解決方案。本文將通過一個 C 實現的快速選擇算…

AQS 基本思想與源碼分析

充分了解 AbstractQueuedSynchronizer 對于深入理解并發編程是有益處的&#xff0c;它是用來構建鎖或者其他同步組件的基礎框架&#xff0c;我們常用的同步工具類如 CountDownLatch、Semaphore、ThreadPoolExecutor、ReentrantLock 和 ReentrantReadWriteLock 內部都用到了它。…

理解位圖算法:使用 C++ 實現高效數據查重

在處理海量數據時&#xff0c;我們常常需要檢查某個元素是否已經存在于集合中。傳統的方法如哈希表或集合容器雖然有效&#xff0c;但在數據量極大的情況下會占用大量內存。這時&#xff0c;位圖算法 (Bitmap) 就成為了一種非常高效的解決方案。本文將通過分析一段使用位圖算法…

數學復習筆記 12

前言 現在做一下例題和練習題。矩陣的秩和線性相關。另外還要復盤前面高數的部分的內容。奧&#xff0c;之前矩陣的例題和練習題&#xff0c;也沒有做完&#xff0c;行列式的例題和練習題也沒有做完。累加起來了。以后還是得學一個知識點就做一個部分的內容&#xff0c;日拱一…

1-10 目錄樹

在ZIP歸檔文件中&#xff0c;保留著所有壓縮文件和目錄的相對路徑和名稱。當使用WinZIP等GUI軟件打開ZIP歸檔文件時&#xff0c;可以從這些信息中重建目錄的樹狀結構。請編寫程序實現目錄的樹狀結構的重建工作。 輸入格式: 輸入首先給出正整數N&#xff08;≤104&#xff09;…

Python爬蟲實戰:研究 RPC 遠程調用機制,實現逆向解密

1. 引言 在網絡爬蟲技術的實際應用中,目標網站通常采用各種加密手段保護其數據傳輸和業務邏輯。這些加密機制給爬蟲開發帶來了巨大挑戰,傳統的爬蟲技術往往難以應對復雜的加密算法。逆向解密作為一種應對策略,旨在通過分析和破解目標網站的加密機制,獲取原始數據。 然而,…

debugfs:Linux 內核調試的利器

目錄 一、什么是 debugfs&#xff1f;二、debugfs 的配置和啟用方式2.1 內核配置選項2.2 掛載 debugfs2.3 Android 系統中的 debugfs 三、debugfs 的典型應用場景3.1 調試驅動開發3.2 內核子系統調試3.3 性能分析 四、常見 debugfs 子目錄與功能示例4.1 /sys/kernel/debug/trac…

lua 作為嵌入式設備的配置語言

從lua的腳本中獲取數據 lua中棧的索引 3 | -1 2 | -2 1 | -3 可以在lua的解釋器中加入自己自定的一些功能,其實沒啥必要,就是為了可以練習下lua