Vue框架中的{{ }}（雙括號）是一種用于顯示數據的語法糖。當Vue實例創建完成后，雙括號中的數據會被對應的值所替換，并在DOM中進行更新。這種語法雖然簡潔易懂，但是背后卻包含了一整套復雜的源碼機制。

Vue中的模板編譯器（compiler）是把模板文件編譯成渲染函數的負責人。它會對雙括號進行解析，并生成對應的渲染函數。

export function createTextVNode (val: string | number) : VNode {
return new VNode(undefined, undefined, undefined, String(val))
}

在渲染函數中，每一個包含雙括號的內容都會被轉換成一個 VNode 的實例。代碼中的 createTextVNode函數就是用于創建文本類型的VNode實例。它會接受一個參數，即雙括號中的值，然后將這個參數轉換成字符串并作為VNode的文本內容。這樣就完成了將雙括號中的數據渲染到頁面的過程。

class VNode {
constructor (
tag?: string | void,
data?: VNodeData | void,
children?: ?Array,
text?: string | void,
elm?: Node | void,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
this.tag = tag
this.data = data
this.children = children
this.text = text
this.elm = elm
this.ns = undefined
this.context = context
this.functionalContext = undefined
this.key = data && data.key
this.componentOptions = componentOptions
this.componentInstance = undefined
this.parent = undefined
this.raw = false
this.isStatic = false
this.isRootInsert = true
this.isComment = false
this.isCloned = false
this.isOnce = false
this.asyncFactory = asyncFactory
this.asyncMeta = undefined
this.isAsyncPlaceholder = false
}
}

上述代碼中的VNode是Virtual DOM的實現，當調用 render 函數時，Vue會調用 createElement 函數創建一個 VNode 的實例，并通過 diff 算法將 VNode 轉換成真實的 DOM，這樣 DOM 的更新就完成了。

在 VNode 實例中，tag 屬性表示標簽名，data 屬性用于存放屬性、樣式等，children 存放子元素，text 則表示文本內容。

new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})

上述代碼中的 Vue 實例中，我們將 message 設置為 "Hello, Vue!" 。在模板中，我們可以這樣使用雙括號將數據渲染到頁面。

<div>{{ message }}</div>

當 Vue 實例渲染該模板時，模板編譯器會解析雙括號并生成對應的渲染函數，最終將 {{ message }} 轉換成文本節點 "Hello, Vue!" 并添加到 DOM 中。這樣就完成了雙括號的渲染過程。

總體來說，Vue中的雙括號語法糖雖然看似簡單，但實際上它涉及了模板編譯器、渲染函數、Virtual DOM等多方面的技術，其中每一個環節都有其復雜性。通過學習Vue的源代碼，我們可以更好地了解Vue的內部機制，深入理解前端框架的實現原理。