搜尋
首頁web前端js教程vue.js中有多少鉤子函數

vue.js中有多少鉤子函數

Nov 24, 2020 am 09:44 AM
vue.js鉤子函數

vue.js中有八個鉤子函數,分別是:1、beforeCreate用於建立前;2、created用於建立後;3、beforeMount用於掛載前;4、mounted用於掛載後;5、beforeDestroy用於銷毀前。

vue.js中有多少鉤子函數

本教學操作環境:windows7系統、Vue2.9.6版,此方法適用於所有品牌電腦。

vue.js中有八個鉤子函數,分別是:

一、beforeCreate:建立前

            1、目前vue實例化的時候會做一個初始化的操作,在這個生命週期函數裡面我們可以做初始化的loading

            2、在目前函數裡面是存取不到data中的屬性,但是可以透過vue的實例物件進行存取

二、created:創建後

            1、當beforeCreate執行完畢以後,會執行created. 在目前函數中我們可以存取data中的屬性

         2、 當前生命週期函數執行的時候會將data中所以的屬性和methods身上所以的方法加入vue的實例身上,同時

            將data中所有的屬性加上一個getter/setter方法

            3、如果需要進行前後端上資料互動(ajax請求的時候) 需要在當前生命週期中使用

三、beforeMount:掛載前

     #    渲染 (#  

#            render函數初次被呼叫---->資料和範本沒有結合,同時也沒有渲染到html頁面上

            可以在此做渲染前data中資料最後的修改

四、mounted:掛載後

            1、資料和範本結合,渲染成真實的DOM結構

#            2、在目前目前為止函數到真實的DOM結構,

            3、vue中我們可以透過$refs來存取到真實的DOM結構

            4、ref我們可以透過this.$refs.屬性

五、beforeDestroy:銷毀前

            銷毀之前也可以存取DOM結構  以及相關的資料(data)#   #        生命週期函數中我們可以移除綁定的事件

六、destroyed:銷毀後

            在這個生命週期函數中會中斷資料與範本之間的關係(不是你的做的)

            在這個生命週期函數中我們還是可以訪問到data中的屬性

            但是訪問了一個不到真實的DOM結構到

##4七、 beforeUpdate:更新前

            只要data中的屬性發生了改變,那麼這個生命週期就會執行,render函數再次會執行

#            在這個生命週期函數中我們可以對資料進行最後的修改,同時也可以存取到最新的DOM結構和資料

八、updated:更新後

            在目前生命週期函數中我們可以存取到最新的DOM結構(資料更新後最新的DOM結構)和資料

相關學習推薦:###javascript影片教學#########

以上是vue.js中有多少鉤子函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript數據類型:瀏覽器和nodejs之間是否有區別?JavaScript數據類型:瀏覽器和nodejs之間是否有區別?May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致,但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window,在Node.js中為global。 2)Node.js獨有Buffer對象,用於處理二進制數據。 3)性能和時間處理在兩者間也有差異,需根據環境調整代碼。

JavaScript評論:使用//和 / * * / * / * /JavaScript評論:使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

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

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

熱門文章

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具