vue基礎知識五:請描述下你對vue生命周期的理解?在created和mounted這兩個生命周期中請求數據有什么區別呢?

在這里插入圖片描述
一、生命周期是什么

生命周期(Life Cycle)的概念應用很廣泛,特別是在政治、經濟、環境、技術、社會等諸多領域經常出現,其基本涵義可以通俗地理解為“從搖籃到墳墓”(Cradle-to-Grave)的整個過程在Vue中實例從創建到銷毀的過程就是生命周期,即指從創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程我們可以把組件比喻成工廠里面的一條流水線,每個工人(生命周期)站在各自的崗位,當任務流轉到工人身邊的時候,工人就開始工作PS:在Vue生命周期鉤子會自動綁定 this 上下文到實例中,因此你可以訪問數據,對 property 和方法進行運算這意味著你不能使用箭頭函數來定義一個生命周期方法 (例如 created: () => this.fetchTodos())

二、生命周期有哪些

Vue生命周期總共可以分為8個階段:創建前后, 載入前后,更新前后,銷毀前銷毀后,以及一些特殊場景的生命周期
在這里插入圖片描述
三、生命周期整體流程

Vue生命周期流程圖

在這里插入圖片描述
具體分析

beforeCreate -> created

初始化vue實例,進行數據觀測

created

完成數據觀測,屬性與方法的運算,watch、event事件回調的配置

可調用methods中的方法,訪問和修改data數據觸發響應式渲染dom,可通過computed和watch完成數據計算

此時vm.$el 并沒有被創建

created -> beforeMount

判斷是否存在el選項,若不存在則停止編譯,直到調用vm.$mount(el)才會繼續編譯

優先級:render > template > outerHTML

vm.el獲取到的是掛載DOM的

beforeMount

在此階段可獲取到vm.el

此階段vm.el雖已完成DOM初始化,但并未掛載在el選項上

beforeMount -> mounted

此階段vm.el完成掛載,vm.$el生成的DOM替換了el選項所對應的DOM

mounted

vm.el已完成DOM的掛載與渲染,此刻打印vm.$el,發現之前的掛載點及內容已被替換成新的DOM

beforeUpdate

更新的數據必須是被渲染在模板上的(el、template、render之一)

此時view層還未更新

若在beforeUpdate中再次修改數據,不會再次觸發更新方法

updated

完成view層的更新

若在updated中再次修改數據,會再次觸發更新方法(beforeUpdate、updated)

beforeDestroy

實例被銷毀前調用,此時實例屬性與方法仍可訪問

destroyed

完全銷毀一個實例。可清理它與其它實例的連接,解綁它的全部指令及事件監聽器

并不能清除DOM,僅僅銷毀實例

使用場景分析

在這里插入圖片描述
四、題外話:數據請求在created和mouted的區別

created是在組件實例一旦創建完成的時候立刻調用,這時候頁面dom節點并未生成;mounted是在頁面dom節點渲染完畢之后就立刻執行的。觸發時機上created是比mounted要更早的,兩者的相同點:都能拿到實例對象的屬性和方法。 討論這個問題本質就是觸發的時機,放在mounted中的請求有可能導致頁面閃動(因為此時頁面dom結構已經生成),但如果在頁面加載前完成請求,則不會出現此情況。建議對頁面內容的改動放在created生命周期當中。

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

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

相關文章

41 | 京東商家書籍評論數據分析

京東作為中國領先的電子商務平臺,積累了大量商品評論數據,這些數據蘊含了豐富的信息。通過文本數據分析,我們可以了解用戶對產品的態度、評價的關鍵詞、消費者的需求等,從而有助于商家優化產品和服務,以及消費者作出更明智的購買決策。 本文將詳細闡述如何獲取京東商家評…

Python opennsfw/opennsfw2 圖片/視頻 鑒黃 筆記

nsfw&#xff08; Not Suitable for Work&#xff09;直接翻譯就是 工作的時候不適合看&#xff0c;真文雅 nsfw效果&#xff0c;注意底部的分數 大體流程&#xff0c;輸入圖片/視頻&#xff0c;輸出0-1之間的數字&#xff0c;一般情況下&#xff0c;Scores < 0.2 認為是非…

7zip分卷壓縮

前言 有些項目上傳文件大小有限制 壓縮包大了之后傳輸也會比較慢 解決方案 我們可以利用7zip壓縮工具對文件進行分卷壓縮 利用7zip壓縮工具進行分卷壓縮 查看待壓縮文件大小 壓縮完成之后有300多M&#xff0c;我們用100M去進行分卷壓縮 選擇待壓縮的文件夾&#xff0c;右…

網絡安全 Day30-運維安全項目-容器架構上

容器架構上 1. 什么是容器2. 容器 vs 虛擬機(化) :star::star:3. Docker極速上手指南1&#xff09;使用rpm包安裝docker2) docker下載鏡像加速的配置3) 載入鏡像大禮包&#xff08;老師資料包中有&#xff09; 4. Docker使用案例1&#xff09; 案例01&#xff1a;:star::star::…

《內網穿透》無需公網IP,公網SSH遠程訪問家中的樹莓派

文章目錄 前言 如何通過 SSH 連接到樹莓派步驟1. 在 Raspberry Pi 上啟用 SSH步驟2. 查找樹莓派的 IP 地址步驟3. SSH 到你的樹莓派步驟 4. 在任何地點訪問家中的樹莓派4.1 安裝 Cpolar內網穿透4.2 cpolar進行token認證4.3 配置cpolar服務開機自啟動4.4 查看映射到公網的隧道地…

【JavaEE基礎學習打卡02】是時候了解Java EE了!

目錄 前言一、為什么要學習Java EE二、Java EE規范介紹1.什么是規范&#xff1f;2.什么是Java EE規范&#xff1f;3.Java EE版本 三、Java EE應用程序模型1.模型前置說明2.模型具體說明 總結 前言 &#x1f4dc; 本系列教程適用于 Java Web 初學者、愛好者&#xff0c;小白白。…

java接口導出csv

1、背景介紹 項目中需要導出數據質檢結果&#xff0c;本來使用Excel&#xff0c;但是質檢結果數據行數過多&#xff0c;導致用hutool報錯&#xff0c;因此轉為導出csv格式數據。 2、參考文檔 https://blog.csdn.net/ityqing/article/details/127879556 工程環境&#xff1a;…

Redis-分布式鎖!

分布式鎖&#xff0c;顧名思義&#xff0c;分布式鎖就是分布式場景下的鎖&#xff0c;比如多臺不同機器上的進程&#xff0c;去競爭同一項資源&#xff0c;就是分布式鎖。 分布式鎖特性 互斥性:鎖的目的是獲取資源的使用權&#xff0c;所以只讓一個競爭者持有鎖&#xff0c;這…

PyTorch: clamp函數與梯度的關系

本文主要以下探究這一點&#xff1a;梯度反向傳播過程中&#xff0c;測試強行修改后的預測結果是否還會傳遞loss&#xff1f; clamp應用場景&#xff1a;在深度學習計算損失函數的過程中&#xff0c;會有這樣一個問題&#xff0c;如果Label是1.0&#xff0c;而預測結果是0.0&a…

【算法】排序+雙指針——leetcode三數之和、四數之和

三數之和 &#xff08;1&#xff09;排序雙指針 算法思路&#xff1a; 和之前的兩數之和類似&#xff0c;我們對暴力枚舉進行了一些優化&#xff0c;利用了排序雙指針的思路&#xff1a; 我們先排序&#xff0c;然后固定?個數 a &#xff0c;接著我們就可以在這個數后面的區間…

Mybatis Plus Interceptor

Mybatis Plus Interceptor 1 獲取表名2 獲取SQL 1 獲取表名 Component public class MybatisInterceptor implements Interceptor {private static final List<String> EXCLUDE_TABLE new ArrayList<>();static {EXCLUDE_TABLE.add("test");}private s…

OpenCV實例(九)基于深度學習的運動目標檢測(一)YOLO運動目標檢測算法

基于深度學習的運動目標檢測&#xff08;一&#xff09; 1.YOLO算法檢測流程2.YOLO算法網絡架構3.網絡訓練模型3.1 訓練策略3.2 代價函數的設定 2012年&#xff0c;隨著深度學習技術的不斷突破&#xff0c;開始興起基于深度學習的目標檢測算法的研究浪潮。 2014年&#xff0c;…

電腦突然黑屏的解決辦法

記錄一次電腦使用問題 問題描述 基本情況&#xff1a;雷神游戲筆記本 windows10操作系統 64位 使用時間 4年 日期&#xff1a;2023年8月11日 當時 電腦充著電 打開了兩個瀏覽器&#xff1a;edge[頁面加載5個左右]&#xff0c;火狐[頁面加載1個左右] 兩個文件夾 一個百度網盤…

Davinci 報表工具 0.3.0-rc release 文本框模糊查詢不生效問題

背景: 在使用過程中發現davinci 的控制器配置中, 取值配置的對應關系設置 包含 或 不包含時 不生效, 不能實現模糊匹配效果, 只能精確查詢; 問題分析: 通過跟蹤接口及相應代碼, 發現在sql 拼接時沒有對 like 和 not like 類型的值兩側添加百分號, 導致模糊查詢失敗 調用過程…

CentOS系統環境搭建(七)——Centos7安裝MySQL

centos系統環境搭建專欄&#x1f517;點擊跳轉 坦誠地說&#xff0c;本文中百分之九十的內容都來自于該文章&#x1f517;Linux&#xff1a;CentOS7安裝MySQL8&#xff08;詳&#xff09;&#xff0c;十分佩服大佬文章結構合理&#xff0c;文筆清晰&#xff0c;我曾經在這篇文章…

Kotlin 使用 View Binding

解決的問題&#xff1a; 《第一行代碼——Android》第三版 郭霖 P277 視圖綁定的問題 描述&#xff1a; kotlin-android-extensions 插件已經棄用 butter knife 已經棄用 解決辦法 推薦使用 View Binding 來代替 findViewById 使用方法 1、配置 build.gradle 2、在act…

踩坑---uni-app中@input 事件不生效

在開發的時候遇到這么一種情況&#xff0c;我們希望input輸入框的值是范圍是0-100或者保留兩位小數之類的&#xff0c;當你輸入時處理后的結果卻不生效&#xff0c;但是試過很多辦法發現都實現不了&#xff0c;最后是按照以下方法解決的,問題原因是uni-app會延時,導致輸入的結果…

Go語言的主要優勢

Go語言的主要優勢包括: 1. 簡潔和易學 Go語法簡單明了,沒有太多晦澀難懂的概念,上手容易,適合快速開發。 2. 強大的并發支持 利用goroutine和channel,可以非常方便地編寫高效的并發程序。 3. 執行性能好 Go編譯成機器碼,執行性能接近C/C,比解釋型語言更高效。 4. 內存管…

絕對值函數的可導性

絕對值函數的可導性 聲明&#xff1a;下面截圖來自《考研數學常考題型解題方法技巧歸納》

利用Figlet工具創建酷炫Linux Centos8服務器-登錄歡迎界面-SHELL自動化編譯安裝代碼

因為我們需要生成需要的特定字符,所以需要在當前服務器中安裝Figlet,默認沒有安裝包的,其實如果我們也只要在一臺環境中安裝,然后需要什么字符只要復制到需要的服務器中,并不需要所有都安裝。同樣的,我們也可以利用此生成的字符用到腳本運行的開始起頭部分,用ECHO分行標…