系列文章
|D1| 總是要開場白一下
是的～又到了一年一度的 IT 鐵人賽。 今年好想工作室又熱血的組隊(推坑(≖＿≖)✧)報名，當然不能放過安麗自己的機會。 回頭看去年發的文章(不忍直視╰(〒皿〒...
|D2| Vue CLI3 安裝與建立 vue 專案
前言 我們透過 webpack 來打包前端各種類型資源，webpack 讀取檔案都依靠 loader 然後轉換成 JS模組，例如： babel-loader:...
|D3| 從原始碼看 Vue 渲染機制 (1) - new Vue 做了什麼
Vue.js 的原始碼全都在 src 資料夾下，src 資料夾結構如下 src/ ├── compiler/ # 編譯相關，把 t...
|D4| 從原始碼看 Vue 渲染機制 (2) - Virtual DOM
前言 在|D3|從 vue 原始碼看 new Vue 做了什麼中提到，當 new Vue 後這個 Vue 實例就有了初始化的屬性或方法。 接著要使用 Vue 實...
|D5| 從原始碼看 Vue 渲染機制 (3) - createElement
createElement 方法主要關注第六個參數， alwaysNormalize 影響 _createElement 方法裡，children 的規範...
|D6| 從原始碼看 Vue 渲染機制 (4) - render
圖片來源：w3cplus Vue.js 文件 Compiler: code that is responsible for compiling templa...
|D7| 從原始碼看 Vue 渲染機制 (5) - $mount
數據驅動是 vue 的核心概念之一，不直接操作 DOM 元素，而是通過修改 data，再把 data 渲染成 DOM。$mount() 就是負責把 data 掛...
|D8| 從原始碼看 Vue 元件化 (1) - 概念介紹
圖片來源：Vue.js 元件化就是把頁面拆成一個ㄧ個元件( component )，然後像積木ㄧ樣把頁面組合起來，例如可能有導航列、側邊欄、table 等 co...
|D9| 從原始碼看 Vue 元件化 (2) - createComponent
以 Vue-cli3 初始化的進入點來說，傳入的 APP 是一個 Component // min.js import Vue from "vue&...
|D10| 從原始碼看 Vue 元件化 (3) - patch
patch 主要是對新舊 vnode 進行 diff 比對，最後回傳所創建真正 的 DOM 節點完成畫面更新。 首先回顧一下，當 vm 實例需要更新時，會執行這...