詳解vue生命周期及每個階段適合進行的操作

VUE生命周期的四個階段

  • create 創建 -------- 創建vue實例并初始化
  • mount 掛載 -------- 把vue實例和視圖進行關聯
  • update 更新 ------- 監聽數據與視圖的變化
  • destroy銷毀 ------- 銷毀實例

生命周期 --- 鉤子函數

vue為上面的4個大的階段提供了一個可編程的接口,我們可以在這4個的某個時段寫入一些自己的邏輯,vue是通過配置一個叫做生命周期鉤子函數的選項來實現的

beforecreate

  • 在實例初始化之后,數據觀測(data observer)和event/watcher事件配置之前調用,里面的this指向實例

create

  • 實例已經創建完成之后被調用。在這一步,實例已完成以下的配置;數據觀測(data observer),屬性和方法的運算,watch/event事件回調。然而,掛載階段還沒開始,還未與頁面關聯起來,$el屬性目前不可見。可在這階段進行一些初始化的操作(如ajax獲取數據之類的)

beforemount

  • 在掛載之前沒調用,解析模板,把實例對象下的$el屬性指向設置中的el參數指定的元素,這個解析后的模板還沒有和$el進行綁定

mounted

  • 掛載之后調用,把解析后的模板與頁面元素進行綁定,用解析后的模板內容替換頁面

beforeupdate

  • 在數據綁定之前被調用

update

  • 在數據改變之后被調用,可以進行依賴于dom的操作(可以在這個階段進行dom操作)

轉載于:https://www.cnblogs.com/Ivy-s/p/7496462.html

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

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

相關文章

.Net 7 新編譯器 ILC 簡析

楔子:這個新編譯器的全稱是ILCompiler。是之前CoreRT項目合并過來的,在.Net 7成熟,并且可以產業化應用。本質:ILC編譯器的本質除了構建CLR的所擁有的主要功能,還包含了對LLVM這種意圖取代GCC編譯器的操作,對…

mac 防止 下載 睡眠_如何暫時防止Mac進入睡眠狀態

mac 防止 下載 睡眠Let’s say you start a big download, then go to bed. When you wake up, you realize your Mac went to sleep before finishing its job. Isn’t there some way to stop this? 假設您開始進行大量下載,然后上床睡覺。 當您醒來時&#xff0…

ubuntu安裝chrome driver

首先下載Chrome Driver(Firefox Driver的安裝與該步驟相同) 鏈接: http://chromedriver.storage.googleapis.com/index.html 接下來在控制臺(terminal)上操作一下紅色字體的指令: Install Unzipsudo apt-ge…

深入理解Spring異常處理

宜信技術學院1.前言相信我們每個人在SpringMVC開發中,都遇到這樣的問題:當我們的代碼正常運行時,返回的數據是我們預期格式,比如json或xml形式,但是一旦出現了異常(比如:NPE或者數組越界等等&am…

基于React開發范式的思考:寫在Lesx發布之際

例子:lesx-example webpack loader: lesx-loader 一些背景 現在前端框架已經呈現出React、Angular、Vue三足鼎立的局勢,對于三者的對比以及技術選型的思考與爭論也被討論了非常多,比如知乎上的這個問題:react.js,angular.js,vue.j…

mac共享單個磁盤_如何與您的所有設備共享酒店的單個Wi-Fi連接

mac共享單個磁盤Many hotels still limit you to one or two Wi-Fi devices per room–a frustrating limitation, especially when traveling with someone else. Connection restrictions can apply anywhere you have to log into a Wi-Fi network via a portal instead of …

Python FastApi:快速建立docker容器/掛載共享文件夾/導入導出

一、目的 a.快速把原有fastapi代碼部署到docker,讓docker在server運行。 b.不涉及docker深入設置。 c.使用python第三方lib少或簡單。 二、步驟 ps:請提前安裝docker 1.新建Dockerfile,放入到項目根目錄 a.Dockerfile沒有后綴. b.準備好requireme…

PHP-FPM 與 Nginx 的通信機制總結

PHP-FPM 介紹 CGI 協議與 FastCGI 協議 每種動態語言( PHP,Python 等)的代碼文件需要通過對應的解析器才能被服務器識別,而 CGI 協議就是用來使解釋器與服務器可以互相通信。PHP 文件在服務器上的解析需要用到 PHP 解釋器,再加上對…

Android——監聽事件總結

各種監聽事件 1.按鈕 Button(1)點擊監聽btn_1.setOnClickListener(new View.OnClickListener() { (2)長按監聽btn_1.setOnLongClickListener(new View.OnLongClickListener() { 2.單選框 RadioGroupradio_gp.setOnCheckedChangeLi…

ChatGPT 大智近妖,從宇宙人生到手搓光刻機,從哄女朋友到寫年終總結我們聊得非常開心,反而讓人越來越憂心...

都說 ChatGPT 要干掉程序員,清理搜索引擎,取代Stack Overflow,還能消滅人類,這些有些言過其實了。ChatGPT 的定位是一個人工智能助理,它說,它的主要目的是通過回答用戶的問題,為用戶提供幫助。在…

如何在Windows Defender中安排掃描

Windows Defender automatically performs background scans during your PC’s idle moments, but doesn’t include an easy way to schedule a full scan. There is a way to do it, though. Windows Defender在PC空閑時自動執行后臺掃描,但是沒有包括安排完整掃…

復習深入筆記02:魔法方法/cookie,session,token/異常

魔法方法 對象生成 1.先調用__new__方法,生成空對象。控制對象生成。 2.當執行“對象類名(namelqz)”,觸發類的__init__()

比特熊故事匯獨家 | .NET 感恩專場

點擊上方藍字關注我們(本文閱讀時間:15分鐘)大家好!我是愛吃、愛玩、更愛學習技術,IT界新晉小紅人,開發者的好朋友——比特熊!比特熊:本期故事匯是.NET專場,今天一次性邀請到DOTNET領…

Ubuntu Core 給物聯網提供更多安全支持

開發四年只會寫業務代碼,分布式高并發都不會還做程序員? Canonical 是 Ubuntu 的一個桌面環境,該公司目前在云服務業務賺到了錢。因為 Ubuntu Core 為嵌入式設備帶來了 Ubuntu 18.04 長期支持(LTS)代碼庫。Ubuntu Core 的鏡像大小為 260MB&…

semantic ui要裝什么才能使用

作者:呆呆笨笨鏈接:https://www.zhihu.com/question/32233356/answer/196799506來源:知乎著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。本答案將以兩種方式講解如何從零開始使用 Semantic-UI,…

用戶帳戶控制設置_創建快捷方式以避免用戶帳戶控制彈出式快捷方式

用戶帳戶控制設置There are numerous applications which, when launched, result in a UAC (User Account Control) warning being displayed. There are reasons why this security measure is a good idea, but it can also be extremely irritating. ElevatedShortcut lets…

Java Observer Pattern(觀察者模式)

當對象間存在一對多關系時,則使用觀察者模式(Observer Pattern)。比如,當一個對象被修改時,則會自動通知它的依賴對象。觀察者模式屬于行為型模式。 關鍵代碼:在抽象類里有一個 ArrayList 存放觀察者們。 優…

rest_framework01:前后端分離\規范\簡單例子(查詢某本書)

web 開發模式 RESTful規范 1 數據的安全保障 url鏈接一般都采用https協議進行傳輸 注:采用https協議,可以提高數據交互過程中的安全性 2 接口特征表現 用api關鍵字標識接口url: https://api.baidu.comhttps://www.baidu.com/api注&#xff…

.NET Core如何通過SSL訪問MongoDB?

【.NET Core】| 總結/Edison Zhou大家好,我是Edison。最近有一個ASP.NET Core通過SSL證書訪問MongoDB的需求,但是在網上發現資料很少,于是調查了一番,做了如下的筆記,希望對你有用。背景在實際場景中,開發環…