1. 程式人生 > >vue2.0之render函數

vue2.0之render函數

pla log 函數 html const 節點 efault 信息 element

雖然vue推薦用template來創建你的html,但是在某些時候你也會用到render函數。

虛擬DOM

Vue 通過建立一個虛擬 DOM 對真實 DOM 發生的變化保持追蹤。請近距離看一下這行代碼:

return createElement(‘h1‘, this.blogTitle)

createElement 到底會返回什麽呢?其實不是一個實際的 DOM 元素。它更準確的名字可能是createNodeDescription,因為它所包含的信息會告訴 Vue 頁面上需要渲染什麽樣的節點,及其子節點。我們把這樣的節點描述為“虛擬節點 (Virtual Node)”,也常簡寫它為“VNode”。“虛擬 DOM”是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。

render方法會傳入一個createElement函數,它是一個用於創建DOM元素或者用於實例化其他組件的構造方法。render方法必須返回一個createElement函數的調用結果,也就是模版內的頂層元素(這個方法在vue2的習慣性使用中經常用h來命名)。

eg:

  render示例:

export default {

  render (createElement){

    const menu_items = ["首頁","搜索","分類","系統"]

    return createElement(‘ul‘,{

      {

        class:{‘uk-nav‘:true}

      },

    menu_items.map(item=>createElement(‘li‘,item)))

}

  }

}

上述render方法用template來寫的話如下:

    <template>

      <ul>

        <li v-for="item in menu_items">

          {{ item }}

        </li>

      </ul>

    </template>

vue2.0之render函數