我們來檢驗一下這幾天所學的東西是不是真的好用吧。

先在/src/index.ts寫下以下代碼：

import './assets/css/style.less';
import { render } from './runtime-dom';
import { h } from './runtime-core/h';

document.body.innerHTML = '<div id="app" />';
const app = <HTMLElement>document.querySelector('#app');

render(h('div', { class: 'title' }, 'NMSL!!'), app);

setTimeout(() => {
  render(h('h1', { style: { color: 'red' } }, 'NMSL!!!!'), app);
}, 3000);

並到/src/assets/css/style.less給.title寫一些你喜歡的樣式，然後把專案運行起來看看。

可以看到render將我們用h創建的虛擬dom進行比對，並以最小量更新將舊的內容替換成了新的內容。

甚至我們也能修改代碼如下，與響應式變數結合：

import './assets/css/style.less';
import effect from './vue/effect';
import { ref } from './vue';
import { render } from './runtime-dom';
import { h } from './runtime-core/h';

document.body.innerHTML = '<div id="app" />';
const app = <HTMLElement>document.querySelector('#app');

const msg = ref('nmsl');

effect(() => {
  render(h('div', { class: 'title' }, msg.value), app);
});

setTimeout(() => {
  msg.value = 'NMSL!!';
}, 3000);

可以看到我們將msg.value改成'NMSL!!'後，畫面確實更新了。

甚至我們還能模擬v-for，渲染一個列表：

import './assets/css/style.less';
import effect from './vue/effect';
import { reactive } from './vue';
import { render } from './runtime-dom';
import { h } from './runtime-core/h';

document.body.innerHTML = '<div id="app" />';
const app = <HTMLElement>document.querySelector('#app');

const list = reactive(['我想下班', '我想加薪', '我想休假']);

effect(() => {
  render(h('ul', { class: 'title' }, list.map((item: string) => h('li', { key: item }, item))), app);
});

setTimeout(() => {
  list.push('我想吃便當');
}, 10000);

可以看到我們用F12檢查工具竄改html中dom元素的文本，在數據更新驅動視圖後，被竄改的li標籤的文本並沒有改變。這證明了我們的diff算法確實沒有重新渲染不需要重新渲染的標籤。

雖說只是簡簡單單的替換標籤內容，但vue在底層替我們做了太多太多事。先是effect函數中，我們用render函數將h函數為我們提供的虛擬dom渲染至頁面上，同時由於觸發了響應式變數的get，收集了這個effect。

然後在修改響應式變數時，觸發其set，因此重新調用effect裡面的回調。render函數會去比對新舊節點，並實現最小量更新。這一切的一切看似簡單，但唯有親手復刻過vue，才能體會到vue底層在我們看不到的地方，究竟替我們幹了多少苦力活。

親愛的讀者，請容我提醒你，今天早上為你泡咖啡的店員、中午替你們辦公室倒垃圾的清潔工、晚上開公車的司機大哥，你的人生中有太多太多偉大而不起眼的人，在你的意識之外替你做了太多太多的苦工。我們的生活可以如此舒適，其實並不全是靠我們自己的努力掙來的。

在看這篇文章的你應該和我一樣都是程序員，但你知道嗎，在我來到現在的公司以前，我做的其實是客服。老實說，就算我有時需要加班，現在的工作仍比客服輕鬆太多太多，年薪最左邊的數字也高達客服時期的兩倍。

我並不是想說客服是個爛工作，不如說正好相反。客服也好，餐飲業的師傅也好，不管是哪個行業的勞工，都有著你無法想像的專業，承受著你無法想像的壓力，幹著你無法想像的大事。

所以，請對世界上每一位奮鬥的人獻上敬意。在你眼中看似簡單平凡的每一件事，在底層可能都是經歷了你無法想像的過程，才好不容易成就的奇蹟。