第十一屆 佳作

web
技術在走,Vue.js 要有
mangoSu

系列文章

DAY 1

|D1| 總是要開場白一下

是的~又到了一年一度的 IT 鐵人賽。 今年好想工作室又熱血的組隊(推坑(≖_≖)✧)報名,當然不能放過安麗自己的機會。 回頭看去年發的文章(不忍直視╰(〒皿〒...

DAY 2

|D2| Vue CLI3 安裝與建立 vue 專案

前言 我們透過 webpack 來打包前端各種類型資源,webpack 讀取檔案都依靠 loader 然後轉換成 JS模組,例如: babel-loader:...

DAY 3

|D3| 從原始碼看 Vue 渲染機制 (1) - new Vue 做了什麼

Vue.js 的原始碼全都在 src 資料夾下,src 資料夾結構如下 src/ ├── compiler/ # 編譯相關,把 t...

DAY 4

|D4| 從原始碼看 Vue 渲染機制 (2) - Virtual DOM

前言 在|D3|從 vue 原始碼看 new Vue 做了什麼中提到,當 new Vue 後這個 Vue 實例就有了初始化的屬性或方法。 接著要使用 Vue 實...

DAY 5

|D5| 從原始碼看 Vue 渲染機制 (3) - createElement

createElement 方法主要關注第六個參數, alwaysNormalize 影響 _createElement 方法裡,children 的規範...

DAY 6

|D6| 從原始碼看 Vue 渲染機制 (4) - render

圖片來源:w3cplus Vue.js 文件 Compiler: code that is responsible for compiling templa...

DAY 7

|D7| 從原始碼看 Vue 渲染機制 (5) - $mount

數據驅動是 vue 的核心概念之一,不直接操作 DOM 元素,而是通過修改 data,再把 data 渲染成 DOM。$mount() 就是負責把 data 掛...

DAY 8

|D8| 從原始碼看 Vue 元件化 (1) - 概念介紹

圖片來源:Vue.js 元件化就是把頁面拆成一個ㄧ個元件( component ),然後像積木ㄧ樣把頁面組合起來,例如可能有導航列、側邊欄、table 等 co...

DAY 9

|D9| 從原始碼看 Vue 元件化 (2) - createComponent

以 Vue-cli3 初始化的進入點來說,傳入的 APP 是一個 Component // min.js import Vue from "vue&...

DAY 10

|D10| 從原始碼看 Vue 元件化 (3) - patch

patch 主要是對新舊 vnode 進行 diff 比對,最後回傳所創建真正 的 DOM 節點完成畫面更新。 首先回顧一下,當 vm 實例需要更新時,會執行這...