vue專案只有一個vue實例麼-前端問答-PHP中文網

首頁

web前端

前端問答

vue專案只有一個vue實例麼

青灯夜游

Dec 19, 2022 pm 03:25 PM

vuevue3

不是，vue專案中可以包含多個vue實例。在vue專案中，一般只有一個VUE實例在main.js中定義，其他都是vue元件實例。 Vue是由一個個實例建構而成的，一個元件就是一個Vue的實例，每個元件內部都可以寫屬性，因此每個元件都是一個Vue的實例。

vue專案只有一個vue實例麼

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

不是，vue專案中可以包含多個vue實例。

Vue是由一個個實例建構而成的，一個元件就是一個Vue的實例，每個元件內部都可以寫屬性，因此每一個元件都是一個Vue的實例。在vue專案中，一般只有一個VUE實例在main.js中定義，其他都是vue元件實例。

Vue 實例

使用Vue 寫入專案時，最重要的是Vue 實例，它提供了學習Vue 的方向，逐步掌握與Vue 實例相關的「特性」是我們的終極目標。

首先，在一個html 檔案中載入vue.js，可以透過script 標籤直接載入vue.js 檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<body>

用瀏覽器開啟這個頁面，在console 中輸入Vue ，你會發現Vue 其本質是一個函數：

vue專案只有一個vue實例麼

#其實Vue 是一個建構函數，可以被看作是一個“類別”，透過new 創建它的實例。那究竟在一個頁面中能創建多少個實例呢？

通常在一個頁面中只建立一個Vue 實例：

<body>
    <div id="app">Hello {{ msg }}</div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: &#39;前端小课&#39;
                }
            }
        });
</script>
</body>

建立一個Vue 實例時傳入一個「自訂」的對象，我們可以把上面的物件換一種寫法：

<body>
    <div id="app">Hello {{ msg }}</div>
    <script>
        const obj = {
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: &#39;前端小课&#39;
                }
            }
        }
        const vm = new Vue(obj);
</script>
</body>

在obj 這個物件中，有個屬性el，表示給Vue 實例提供的「模板」，也就是說當你建立一個實例時，要告訴Vue 渲染的HTML 是什麼，如何把HTML 中要做的事情與obj 建立某種連結。例如 HTML 範本中要顯示的資料如何和 Vue 實例的資料建立關聯，如何回應 HTML 範本中要觸發的事件。要建立關聯，必須在範本與Vue實例之間作出約定。

el 可以是一個選擇器，也可以是一個 HTMLElement （打通 DOM 的設計架構）實例。可以把 el 寫成：

el: document.getElementById(&#39;app&#39;),

也可以是任一選擇器：

 el: &#39;div&#39;,

下面這個顯示結果是什麼？

vue專案只有一個vue實例麼

最後發現 title 這個值「早安，打卡！」並沒有被渲染到HTML 上，這是因為title 所在的div 並沒有在Vue 實例的作用範圍內，也就是說Vue 實例只能作用到創建實例時所在的模板（例如透過el 指向的模板）：

vue專案只有一個vue實例麼

其實，一個頁面可以建立多個Vue實例，例如下面的程式碼創建了3 個Vue 實例，發現可以正常工作：

<body>
    <div id="app">
        <h1 id="nbsp-msg-nbsp">{{ msg }}</h1>
    </div>
    <div id="app-body">
        <h4 id="nbsp-title-nbsp">{{ title }}</h4>
    </div>
    <div class="app-footer">
        <h4 id="nbsp-footer-nbsp">{{ footer }}</h4>
    </div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: "欢迎来到前端小课",
                }
            }
        });
</script>
    <script>
        const vmBody = new Vue({
            el: &#39;#app-body&#39;,
            data: function () {
                return {
                    title: "Vue 实例讲解"
                }
            }
        });
</script>
    <script>
        const vmFooter = new Vue({
            el: &#39;.app-footer&#39;,
            data: function () {
                return {
                    footer: "感谢阅读",
                }
            }
        });
</script>
</body>

用瀏覽器打開，結果如下：

vue專案只有一個vue實例麼

這個範例讓我想到了元件，「元件是可重複使用的Vue 實例」，這種寫法有點像元件，每一個Vue 實例看成是一個元件。

我們再看一個例子－ Vue 實例中再嵌套一個Vue 實例：

<body>
    <div id="app">
        <h1 id="nbsp-msg-nbsp">{{ msg }}</h1>
        <!-- 这里不能声明一个新的 Vue 实例 -->
        <div id="app-body">
            <h4 id="会渲染吗-nbsp-title-nbsp">会渲染吗？{{ title }}</h4>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: &#39;#app&#39;,
            data: function () {
                return {
                    msg: "欢迎来到前端小课",
                    title: "#app - Vue 实例讲解"
                }
            }
        });
</script>
    <script>
        const vmBody = new Vue({
            el: &#39;#app-body&#39;,
            data: function () {
                return {
                    title: "#app-body - Vue 实例讲解"
                }
            }
        });
</script>
</body>

渲染結果為，發現結果使用的是#app 實例中的資料：

vue專案只有一個vue實例麼

Vue 實例中還有很多API，每一個API 都需要我們逐步學習。例如生命週期函數，計算屬性，定義方法，過濾器：

vue專案只有一個vue實例麼

【相關推薦：vuejs影片教學、web前端開發】

以上是vue專案只有一個vue實例麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解usestate（）：綜合反應國家管理指南Apr 25, 2025 am 12:21 AM

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

使用React的優點是什麼？Apr 25, 2025 am 12:16 AM

ReactispupularduetoItsOmpontement，基於虛擬，虛擬詞，Richecosystem和declarativedation.1）基於組件的harchitectureallowslowsforreusableuipieces。

在React中調試：識別和解決共同問題Apr 25, 2025 am 12:09 AM

todebugreactapplicationsefectefectionfection，usethestertate：1）proppropdrillingwithcontextapiorredux.2）使用babortControllerToptopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRollerTopRaceeDitions.3）intleleassynChronOusOperations.3）

反應中的usestate（）是什麼？Apr 25, 2025 am 12:08 AM

usestate（）inrectallowsStateMagementionInfunctionalComponents.1）ITSIMPLIFIESSTATEMAGEMENT，MACHECODEMORECONCONCISE.2）usetheprevcountfunctionToupdateStateBasedonitspReviousViousViousvalue，deveingingStaleStateissues.3）

usestate（）與用戶ducer（）：為您的狀態需求選擇正確的掛鉤Apr 24, 2025 pm 05:13 PM

selectUsestate（）forsimple，獨立的variables; useusereducer（）forcomplexstateLogicorWhenStatedIppedsonPreviousState.1）usestate（）isidealForsImpleupDatesLikeToggGlikGlingaBglingAboolAboolAupDatingacount.2

使用usestate（）管理狀態：實用教程Apr 24, 2025 pm 05:05 PM

useState優於類組件和其它狀態管理方案，因為它簡化了狀態管理，使代碼更清晰、更易讀，並與React的聲明性本質一致。 1)useState允許在函數組件中直接聲明狀態變量，2)它通過鉤子機制在重新渲染間記住狀態，3)使用useState可以利用React的優化如備忘錄化，提升性能，4)但需注意只能在組件頂層或自定義鉤子中調用，避免在循環、條件或嵌套函數中使用。

何時使用usestate（）以及何時考慮替代狀態管理解決方案Apr 24, 2025 pm 04:49 PM

useUsestate（）forlocalComponentStateMangementighatighation; 1）usestate（）isidealforsimple，localforsimple.2）useglobalstate.2）useglobalstateSolutionsLikErcontExtforsharedState.3）

React的可重複使用的組件：增強代碼可維護性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionActActRossDifferentPartSofanApplicationorprojects.1）heSredunceRedUndenceNandSimplifyUpdates.2）yensureconsistencyInuserexperience.3）

See all articles