今天要來介紹另外一個非常神奇的東西，Vue 的模板雙括號置換

若是已經開始練習使用 Vue 的朋友在第一次使用像是 {{message}} 這類的東西的時候一定滿頭問號，想說怎麼這東西可以跑，我們今天就來實作看看吧
Step1. 建立基礎 html 模板以及一個準備渲染用的物件

<div id='app'>
    <div>{{title}}</div>
    <div>{{userInfo.account}}</div>
    <div>{{userInfo.password}}</div>
</div>
<script>
    let vm = {
        title: '登入系統',    
        userInfo: {
            account: 'admin',
            password: '123456'
        }
    }
</script>

Step2. 遍歷 DOM 元件，尋找雙括號

let app = document.querySelector('#app');
let regx = /{{.*?}}/g;
let args = Object.keys(vm);
function walk(elem){
    if(elem.nodeType == 3){
        let arr = elem.nodeValue.match(regx);
    } else {
        if(elem.childNodes.length > 0){
            elem.childNodes.forEach(elemChild => {
                walk(elemChild)
            })
        }
    }
}
walk(app)

在步驟二中，我們先取得要偵測的 DOM 範圍，接下來透過正則化尋找雙括號的段落，並且對 DOM 內進行遍歷，直到找尋到 nodeType == 3 也就是所謂的文字節點，我們也會在這邊開始進行置換
Step3. 括號置換

if(elem.nodeType == 3){
    let arr = elem.nodeValue.match(regx);
    if(arr){
        arr.forEach(item => {
            let fn = new Function(args,
            `return ${item.replace('{{', '').replace('}}', '')}`);
            let result = fn.apply(vm, args.map(key => vm[key]));
            elem.nodeValue = elem.nodeValue.replace(item.result);
        })
    }
}

我們在這邊透過 apply 將 vm 丟給 fn 函式，因此在 fn 韓式內執行的變數會自動引用 vm 的值，再透過 nodeValue 的置換我們的雙括號就成功變成我們要的值囉～

這兩天講些比較原理性的內容，明天將會開始介紹最常被使用到的 v-bind 與 v-on 啦～感謝觀看的各位