vue從入門到精通之基礎篇(三)生命周期

生命周期

定義:

每個 Vue 實例在被創建時都要經過從創建倒掛載再到更新、卸載的一系列過程,同時在這個過程中也會運行一些叫做生命周期鉤子的函數,可以讓我們用自己注冊的js方法控制整個大局,在這些事件響應方法中的this直接指向的是vue的實例。

鉤子函數的執行時間

beforeCreate

在實例初始化之后,數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

created

實例已經創建完成之后被調用。在這一步,實例已完成以下的配置:數據觀測(data observer),屬性和方法的運算, watch/event 事件回調。然而,掛載階段還沒開始,$el 屬性目前不可見。

beforeMount

在掛載開始之前被調用:相關的 render 函數首次被調用。

mounted

el 被新創建的 vm.$el 替換,并掛載到實例上去之后調用該鉤子。

beforeUpdate

數據更新時調用,發生在虛擬 DOM 重新渲染和打補丁之前。

updated

由于數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之后會調用該鉤子。

beforeDestroy

實例銷毀之前調用。在這一步,實例仍然完全可用。

destroyed

Vue 實例銷毀后調用。調用后,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。 該鉤子在服務器端渲染期間不被調用。

還有兩個特殊的(配合使用keep-alive):activated、deactivated

activated

keep-alive組件被激活時調用

deactivated

keep-alive組件被停用時調用

鉤子函數中該做的事情

created

實例已經創建完成,因為它是最早觸發的原因可以進行一些數據,資源的請求。

mounted

實例已經掛載完成,可以進行一些DOM操作

beforeUpdate

可以在這個鉤子中進一步地更改狀態,這不會觸發附加的重渲染過程。

updated

可以執行依賴于 DOM 的操作。然而在大多數情況下,你應該避免在此期間更改狀態,因為這可能會導致更新無限循環。

該鉤子在服務器端渲染期間不被調用。

destroyed

可以執行一些優化操作

keep-alive

在使用vue-router時有時需要使用來緩存組件狀態,這個時候created鉤子就不會被重復調用了,如果我們的子組件需要在每次加載的時候進行某些操作,可以使用activated鉤子觸發。

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

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

相關文章

libcurl庫進行http通訊網絡編程

https://www.cnblogs.com/lifan3a/articles/7479256.html

Java 開始

(事先聲明:該文章并非完全是我自己的產出,更多的是我個人在看到資料后通過理解并記錄下來,作為自己閱讀后的一個筆記;我現在試圖對自己多年工作中的知識點做一個回顧,希望能融會貫通) &#xff…

Java核心技術筆記——第 12 章 反射

轉載自:[https://www.cnblogs.com/chanshuyi/p/head_first_of_reflection.html] 12 反射 1. 引入反射 通常情況下,調用一個類的方法的步驟如下: 創建該類的對象。調用該對象的方法。通過這種方式調用方法時,必須要知道類的定義以及…

HTML5知識點匯總

1、HTML5新特性 用于繪畫的canvas標簽用于媒介回放的video和audio元素對本地離線儲存的更好支持新的特殊內容元素,如:article、footer、header、nav、section、aside、hgroup、figure新的表單控件,如:calendar、date、time、emai…

實用網站

https://blog.csdn.net/devcloud/article/details/103121883

網絡(圖)(數學)

轉載于:https://www.cnblogs.com/fengxunling/p/9781575.html

DES加解密時 Given final block not properly padded 的解決方案

事情的經過是這個樣子的。。。。。。 先說說問題是怎么出現的。根據客戶需求,需要完成一個一鍵登錄的功能,于是我的項目中就誕生了DesUtil,但是經過幾百次測試,發現有一個登錄直接報錯!難道又遇到神坑啦!&a…

java 算法優化向導

一.什么是數據結構?什么是算法 不必像學生時代深究定義。以一個簡單的例子說明。 數據結構,圖書館的書怎么擺列,按照書的類型,作者,出版時間,語言等等放置,這就是數據的結構。 算法&#xff0c…

appium工作原理

Appium原理 面試的時候,被問到appium原理,一點不會,實在尷尬。大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/69220719 appium運行時安裝的2個應用:Appium Settings和Unlock。 一、appium加載的過程圖解&…

LeetCode 21. Merge Two Sorted Lists

LeetCode 21. Merge Two Sorted Lists 分析 難度:易 題目 Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. Example: Input: 1->2->4, 1->3->4 Out…

Mac OS X 下 TAR.GZ 方式安裝 MySQL

Mac OS X 下 TAR.GZ 方式安裝 MySQL 注意: 本篇文章適用與 MySQL 5.6 版本的安裝, 但已不再適用 5.7 的安裝, 5.7 的安裝方式請參見:《Mac OS X 下 TAR.GZ 方式安裝 MySQL 5.7》 在 Mac 系統上, 安裝 MySQL Server 一般是用 DMG 包在圖形化界面下按提示安裝, 此外 MySQL 還提供…

快排再改進

快排再改進 #include <iostream> using namespace std;void mySwap(int &a, int &b) {int temp a;a b;b temp; }void insertSort(int a[], int left, int right) {int tmp;int in 0;int out 0;for (out left 1; out < right; out) {tmp a[out];in ou…

【Linux基礎】crontab定時命令詳解

周期執行的任務一般由cron這個守護進程來處理[ps -ef|grep cron]。cron讀取一個或多個配置文件&#xff0c;這些配置文件中包含了命令行及其調用時間。cron的配置文件稱為“crontab”&#xff0c;是“cron table”的簡寫。 一、cron服務  cron是一個linux下 的定時執行工具&a…

5個Vue.js項目的令人敬畏的模板

開發人員查看使用SPA&#xff0c;Webpack&#xff0c;身份驗證&#xff0c;GraphQL&#xff0c;文檔和測試的Vue開發人員的資源。 你準備開始一個重要的Vue項目嗎&#xff1f;為了確保從堅實的基礎開始&#xff0c;您可以使用模板&#xff08;也就是樣板&#xff0c;骨架&#…

測試多個輸入條件的方法

轉載于:https://www.cnblogs.com/www-qcdwx-com/p/10641281.html

問題規模

問題規模本身并沒有非常精準的定義吧一般都是指運行時間t和輸入參數個數n的關系用O(n)表示比如max([x])就是O(n)而冒泡排序則是O(n^2)

SSM+mybatis單元測試

初學SSMmybatis單元測試遇到的問題&#xff0c;dao注入后為nullDao層注入失敗&#xff0c;查看后&#xff0c;發現注解都寫的無誤&#xff0c;經朋友的指點&#xff0c;在測試類上加了一句“RunWith(SpringJUnit4ClassRunner.class) ContextConfiguration(locations{“classpat…

Sublime text 2/3 中 Package Control 的安裝與使用方法

Package Control 插件是一個方便 Sublime text 管理插件的插件&#xff0c;但因為 Sublime Text 3 更新了 Python 的函數&#xff0c;API不同了&#xff0c;導致基于 Python 開發的插件很多都不能工作&#xff0c;Package Control 原來的安裝方法都失效了。 網上有2種使用 Git…

接口測試

集成&#xff1a; 接口&#xff0c;代碼級&#xff0c;service層 unit-》service-》UI 接口測試和界面沒有任何關系 A->B  數據流向 理論 我們學過&#xff0c;集成測試主要測接口&#xff0c;通過學習集成測試&#xff0c;我們發現是把單元測試通過后的方法直接需要對接的…

React-Router ---withRouter

import React from react import { withRouter } from react-router const Hello (props) > { return ( <div><button onClick{ () > props.history.push(/about) }>Hello</button></div> ) } const WithRouterHello withRouter(Hello);//也可…