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,而且許多包被解耦,更加模塊化。