vue2.6源碼分析

vue相關文檔

vue-cli官方文檔
vuex官方文檔
vue-router 官方文檔
vue2.6源碼地址

如何調試源碼

package.json 添加了--sourcemap

"scripts": {"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap"
}

新增html文件

<script src="./dist/vue.js"></script>
<div id="app">{{a.b}}</div>
<script>var vm = new Vue({el: "#app",data: {a: {b: 1,},},mounted() {this.a.b = 2;},});
</script>

入口文件在哪里

源碼入口文件 scripts/config.js里查找web-full-dev,于是如果js文件為 entry-runtime-with-compiler.js

ctrl+shift+p 輸入文件名字 就可以找到該文件
很多時候會用到別名,想快速找到該文件可以復制路徑和上面的方法一樣 也可以找到
import { warn, cached } from 'core/util/index'
別名文件是alias.js 其中一個別名如下core: resolve('src/core'),

vue3特性

1、更快:
虛擬DOM重寫
優化slots的生成
靜態樹提升
靜態屬性提升
基于Proxy的響應式系統
2、更小: 通過搖樹優化核心庫體積
3、更容易維護: TypeScript + 模塊化
4、更加友好:
跨平臺:編譯器核心和運行時核心與平臺無關,使得Vue更容易與任何平臺(Web、
Android、iOS)一起使用
5、更容易使用
改進的TypeScript支持,編輯器能提供強有力的類型檢查和錯誤及警告
更好的調試支持
獨立的響應化模塊
Composition API

虛擬 DOM 重寫----------期待更多的編譯時提示來減少運行時開銷,使用更有效的代碼來創建虛擬節點。
組件快速路徑+單個調用+子節點類型檢測

跳過不必要的條件分支
JS引擎更容易優化
在這里插入圖片描述

優化slots生成 -----------vue3中可以單獨重新渲染父級和子級

確保實例正確的跟蹤依賴關系
避免不必要的父子組件重新渲染
在這里插入圖片描述

靜態樹提升(Static Tree Hoisting)---------使用靜態樹提升,這意味著 Vue 3 的編譯器將能夠檢測到什么是靜態的,然后將其提升,從而降低了渲
染成本。

跳過修補整棵樹,從而降低渲染成本
即使多次出現也能正常工作
在這里插入圖片描述

靜態屬性提升 ----------------------------- 使用靜態屬性提升,Vue 3打補丁時將跳過這些屬性不會改變的節點。

在這里插入圖片描述

基于 Proxy 的數據響應式 ----------- Vue 2的響應式系統使用 Object.defineProperty 的getter 和 setter。Vue 3 將使用 ES2015 Proxy 作為其觀察機制,這將會帶來如下變化:

組件實例初始化的速度提高100%
使用Proxy節省以前一半的內存開銷,加快速度,但是存在低瀏覽器版本的不兼容
為了繼續支持 IE11,Vue 3 將發布一個支持舊觀察者機制和新 Proxy 版本的構建

在這里插入圖片描述

高可維護性 --------- Vue 3 將帶來更可維護的源代碼。它不僅會使用 TypeScript,而且許多包被解耦,更加模塊化。

watcher底層原理

在這里插入圖片描述

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

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

相關文章

linux apt update錯誤提示修復

錯誤提示&#xff1a; E: Release file for http://security.debian.org/dists/bullseye-security/InRelease is expired (invalid since 15d 14h 45min 26s). Updates for this repository will not be applied. E: Release file for http://ftp.jp.debian.org/debian/dists/b…

【Hello Go】Go語言并發編程

并發編程 概述基本概念go語言的并發優勢 goroutinegoroutine是什么創建goroutine如果主goroutine退出runtime包GoschedGoexitGOMAXPROCS channel無緩沖的channel有緩沖的channelrange和close單向channel 定時器TimerTicker Select超時 概述 基本概念 并行和并發概念 并行 &…

CVE-2023-6099:優卡特臉愛云一臉通智慧管理平臺SystemMng.ashx接口未授權漏洞復現

文章目錄 優卡特臉愛云一臉通智慧管理平臺未授權SystemMng.ashx接口漏洞復現&#xff08;CVE-2023-6099&#xff09; [附POC]0x01 前言0x02 漏洞描述0x03 影響版本0x04 漏洞環境0x05 漏洞復現1.訪問漏洞環境2.構造POC3.復現 0x06 修復建議 優卡特臉愛云一臉通智慧管理平臺未授權…

mysql字符串轉為數字的三種方法、字符串轉日期

隱式轉換 在MySQL中&#xff0c;使用0運算符可以將一個非數字的值隱式地轉換為數字。這在進行數學運算或比較操作時非常有用。 需要注意的是&#xff0c;在使用0進行隱式轉換時&#xff0c;MySQL會盡可能將字符串轉換為數字。如果字符串不能轉換為數字&#xff0c;則會返回0。…

【解決】HDFS JournalNode啟動慢問題排查

文章目錄 一. 問題描述二. 問題分析1. 排查機器性能2. DNS的問題 三. 問題解決 一句話&#xff1a;因為dns的問題導致journalnode啟動時很慢&#xff0c;通過修復dns對0.0.0.0域名解析&#xff0c;修復此問題。 一. 問題描述 從journalnode啟動到服務可用&#xff0c;完成RPC…

使用Python將圖片轉換為PDF

將圖片轉為 PDF 的主要原因之一是為了方便共享和傳輸。此外&#xff0c;將多張圖片合并成一個 PDF 文件還可以簡化文件管理。之前文章詳細介紹過如何使用第三方庫Spire.PDF for Python將PDF文件轉為圖片&#xff0c;那么本文介紹使用同樣工具在Python中實現圖片轉PDF文件的功能…

【OpenCV+OCR】計算機視覺:識別圖像驗證碼中指定顏色文字

文章目錄 1. 寫在前面2. 讀取驗證碼圖像3. 生成顏色掩碼4. 生成黑白結果圖5. OCR文字識別6. 測試結果 【作者主頁】&#xff1a;吳秋霖 【作者介紹】&#xff1a;Python領域優質創作者、阿里云博客專家、華為云享專家。長期致力于Python與爬蟲領域研究與開發工作&#xff01; 【…

Spring Security(安全框架,必須登錄成功才能訪問指定資源)

一、背景知識 1、Spring Security 是一個能夠為基于Spring的企業應用系統提供聲明式的安全訪問控制解決方案的安全框架。它提供了一組可以在Spring應用上下文中配置的Bean&#xff0c;充分利用了Spring IoC&#xff0c;DI&#xff08;IOC: 控制反轉Inversion of Control ,DI:D…

24路電磁鎖控板的特點和主要參數

智能快遞柜、智能生鮮柜、電子存儲柜、超市寄存柜、智能送餐柜、電子更衣柜、檔案柜等物聯網終端設備&#xff0c;都是采用電磁鎖控制&#xff0c;這種電磁鎖控制板俗稱鎖控板。鎖控板可以遠程控制儲物柜的開關以及遠程監控并提供鎖的反饋信號。沐渥開發的24路電磁鎖控板可以控…

AI:87-基于深度學習的街景圖像地理位置識別

?? 本文選自專欄:人工智能領域200例教程專欄 從基礎到實踐,深入學習。無論你是初學者還是經驗豐富的老手,對于本專欄案例和項目實踐都有參考學習意義。 ??? 每一個案例都附帶有在本地跑過的代碼,詳細講解供大家學習,希望可以幫到大家。歡迎訂閱支持,正在不斷更新中,…

OpenAI 曾收到 AI 重大突破警告;半獨立的 OpenAI 比與微軟合并更好丨 RTE 開發者日報 Vol.91

開發者朋友們大家好&#xff1a; 這里是 「RTE 開發者日報」 &#xff0c;每天和大家一起看新聞、聊八卦。我們的社區編輯團隊會整理分享 RTE &#xff08;Real Time Engagement&#xff09; 領域內「有話題的 新聞 」、「有態度的 觀點 」、「有意思的 數據 」、「有思考的 文…

ubuntu下docker環境使用GPU配置

本文主要講述整個命令流程&#xff0c;具體講解請看官網nvidia-容器工具包和一篇總結得很詳細的博文docker使用GPU總結 docker的版本必須安裝19.0版本以上的&#xff0c;這里也只講19.0版本以上的使用方法 首先設置一下網絡信息 curl -fsSL https://nvidia.github.io/libnvi…

LeetCode131. Palindrome Partitioning

文章目錄 一、題目二、題解 一、題目 Given a string s, partition s such that every substring of the partition is a palindrome . Return all possible palindrome partitioning of s. Example 1: Input: s “aab” Output: [[“a”,“a”,“b”],[“aa”,“b”]] Exa…

工具【1、計算時間差2、獲取當天時間前后七天時間3、根據當前數據的位置,在數組中插入數據4、數組中,某個屬性相同的數據放在一塊,如把某個日期相同的相連一起】

生成UUID /*** 唯一的隨機字符串&#xff0c;用來區分每條數據* returns {string}*/ export function getUid() {return xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g, (c) > {const r (Math.random() * 16) | 0;const v c x ? r : (r & 0x3) | 0x8;retu…

【圖文詳解】SiamFC++與圖注意力的強強聯合:單目標追蹤系統

1.研究背景與意義 隨著計算機視覺技術的不斷發展&#xff0c;單目標追蹤&#xff08;Single Object Tracking, SOT&#xff09;作為計算機視覺領域的一個重要研究方向&#xff0c;已經在許多實際應用中得到了廣泛的應用。單目標追蹤系統可以通過分析視頻序列中的目標運動&…

服務器流量包扣減規則

服務器買的流量包,一般指的是上行帶寬,下行通常是不限的 上行和下行是針對服務器而言的 客戶端上傳文件給服務器,對服務器而言它是在下載,所以對服務器而言他是用的下行帶寬(下行流量) 客戶端從服務器下載文件,對服務器而言它是在上傳,所以對服務器而言他是用的上行帶寬(上行…

大數據量條件SQL查詢內存處理方案以及數據過濾算法優化

MySQL是一個廣泛使用的關系型數據庫管理系統。通過SQL語言進行數據操作和查詢&#xff0c;還支持多用戶、多線程和分布式操作等功能。 在實際使用中&#xff0c;我們會遇到各種查詢條件&#xff0c;如字段名、表名、邏輯運算符、比較運算符、函數等。其中&#xff0c;有些查詢…

淺析智慧社區建設趨勢及AI大數據監管平臺方案設計

一、背景與需求 伴隨著社會與經濟的發展&#xff0c;人們對生活質量的要求越來越高&#xff0c;與此同時&#xff0c;新興技術的進步也促進了智慧社區市場的逐步成熟。智慧社區是社區管理的一種新理念&#xff0c;是新形勢下城市與社會管理的一種創新模式。 在上海、杭州、深…

在.bashrc文件修改環境變量的做法

作者&#xff1a;朱金燦 來源&#xff1a;clever101的專欄 為什么大多數人學不會人工智能編程&#xff1f;>>> ~/.bashrc文件是linux下保存環境變量的系統文件。原以為使用sed命令修改.bashrc文件&#xff0c;實際上不行&#xff0c;需要使用echo命令。具體示例如下…

02-詳細介紹Java8新特性方法引用,構造引用,數組引用

方法/構造/數組引用 方法引用 當要傳遞給Lambda體的操作已經有實現的方法時就可以使用方法引用,方法引用和構造器引用就是為了簡化Lambda表達式 方法引用可以看做是Lambda表達式深層次的表達,方法引用本質還是Lambda表達式所以也是函數式接口的一個實例通過方法的名字來指向…