搜尋
首頁web前端前端問答vue的核心是什麼

vue的核心是什麼

Jan 11, 2022 pm 05:12 PM
vue核心

vue有兩大核心:1、資料驅動,也就是資料的雙向綁定,讓視圖(DOM)的內容隨著資料的改變而改變;2、元件化系統,可實現擴充HTML元素,封裝可用的程式碼。

vue的核心是什麼

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

vue.js的兩大核心

  • #資料驅動程式

  • 元件化系統

1. 資料驅動,也就是資料的雙向綁定

  • Vue 響應式核心就是,getter 的時候會收集依賴,setter 的時候會觸發依賴更新

  • vue將遍歷data中物件的所有property,並使用Object.defineProperty 將這些property 全部轉為
    getter/setter。

  • 這些 getter/setter 對使用者來說是看不見的,但是在內部它們讓 Vue 能夠追蹤依賴,在 property
    被存取和修改時通知變更。

  • 每個元件實例都對應一個 watcher 實例,它會在元件渲染的過程中把「接觸」過的資料 property 記錄為依賴。

  • getter的時候我們會收集依賴,依賴收集就是訂閱資料變化watcher的收集,依賴收集的目的是當響應式資料改變時,能夠通知對應的訂閱者去處理相關的邏輯。

  • setter 的時候會觸發依賴更新,之後當依賴項的 setter 觸發時,會通知 watcher,從而使它關聯的元件重新渲染。

2. 元件化系統

元件化

擴充HTML元素,封裝可重複使用的程式碼。每一個元件都對應一個ViewModel。頁面上每個獨立的可視/可互動區域都可以視為一個元件。每個元件對應一個工程目錄,元件所需的各種資源在這個目錄下就進維護。頁面是元件的容器,元件可以嵌套自由組合形成完整的頁面。

元件的核心選項:

  • 範本(template):範本宣告了資料和最終展現給使用者的DOM之間的對應關係。

  • 初始資料(data):一個元件的初始資料狀態。對於可重複使用的元件來說,這通常是私有的狀態。

  • 接受的外部參數(props):元件之間透過參數來進行資料的傳遞和共用。

  • 方法(methods):資料的改變操作一般都在元件的方法內進行。

  • 生命週期鉤子函數(lifecycle hooks):一個元件會觸發多個生命週期鉤子函數,最新2.0版本對於生命週期函數名稱改變很大。

  • 私有資源(assets):Vue.js當中將使用者自訂的指令、篩選器、元件等統稱為資源。一個元件可以聲明自己的私有資源。私有資源只有該元件和它的子元件可以呼叫。

【相關推薦:vue.js教學

以上是vue的核心是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
掌握CSS選擇器:高效樣式的類別與ID掌握CSS選擇器:高效樣式的類別與IDMay 16, 2025 am 12:19 AM

使用類選擇器和ID選擇器取決於具體用例:1)類選擇器適用於多元素、可重用樣式,2)ID選擇器適用於唯一元素、特定樣式。類選擇器更靈活,ID選擇器處理速度更快但可能影響代碼維護性。

HTML5規範:探索關鍵目標和動機HTML5規範:探索關鍵目標和動機May 16, 2025 am 12:19 AM

keykeygoalsandmotivationsbehindhtml5weretoenhancesemantstructure,Improvemultimediasupport,andensureBetterperformanceandCompatibalityAcroscaroscaroscaroscarossdecrossdecrossdecrossdecrossdecrossdecrossdecrossdevices,drivendybytheneedtoAddresshtml4'slimitationsand limitiTations and limittations andmeetmeetModerntructAndmmoderntructss.1)

CSS ID和類:簡單指南CSS ID和類:簡單指南May 16, 2025 am 12:18 AM

IDSareNiqueAndusedForsingLelement,andleclassEsareSareSarereableFormultIllets.1)useIdIdSforuniqueElementsLikeAspeCificheader.2)useclassesforconsistentSistentSistentStyAcroSsmultipleLementslike.3)becautiouswithspecificitifieCificityAsiseSesses.4)

HTML5目標:了解規範的關鍵目標HTML5目標:了解規範的關鍵目標May 16, 2025 am 12:16 AM

html5aimstoenhancewebaccctible,互動性和效率。 1)ITSupportsMultimediawithOutPlugins,Simplifyinginguserexperience.2)Semanticmarkmarksmarkupimprovissupimprovessupstructureandacccessessible.3)增強bacegencementingIncrassubility.4)

使用HTML5難以實現其目標嗎?使用HTML5難以實現其目標嗎?May 16, 2025 am 12:06 AM

html5isnotparticulllydifficulttousebutrequirequireSustingingItsFeatures.1)smanticelementslike like ,,,和iMproveructure,andimprovucture,可讀性,seo和acctibility.2)多中性倍增量,且可讀性

CSS:我可以在同一DOM中使用多個ID嗎?CSS:我可以在同一DOM中使用多個ID嗎?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

HTML5的目的:創建一個更強大,更容易訪問的網絡HTML5的目的:創建一個更強大,更容易訪問的網絡May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities,Makeitmoredynamic,互動,可及可訪問。 1)ITSupportsMultimediaElementsLikeAnd,消除innewingtheneedtheneedtheneedforplugins.2)SemanticeLelelemeneLementelementsimproveaCceccessibility inmproveAccessibility andcoderabilitile andcoderability.3)emply.3)lighteppoperable popperappoperable -poseive weepivewebappll

HTML5的重要目標:增強網絡開發和用戶體驗HTML5的重要目標:增強網絡開發和用戶體驗May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentanduserexperiencethroughsemantstructure,多媒體綜合和performanceimprovements.1)SemanticeLementLike like,和ImproVereAdiability and ImproVereAdabilityActibility.2)and tagsallowsemlessallowseamelesseamlessallowseamelesseamlesseamelesseamemelessmultimedimeDiaiaembediiaembedplugins.3)。 3)3)

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)