vue的渲染【模板、渲染函数】

一、基于 HTML 的模板语法，实现渲染。

• 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

 

二、使用渲染函数，实现渲染。https://cn.vuejs.org/v2/guide/render-function.html

　　   Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。

　　　Render函数通过createElement参数来创建 Virtual Dom

1、createElement 用法

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中 attribute 对应的数据对象。可选。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

• 第一个参数必选，可以是一个HTML标签，也可以是一个组件或函数；

  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数。

• 第二个是 可选参数，数据对象。【一个与模板中 attribute 对应的数据对象，就是把标签的属性都写到这里了】

• class：
• style：
• attrs:
• props
• 等等
• 第三个是  子节点，也是可选参数，用法一致。数组中每一项 也是一个 createElement() ，层层递进的。

    // {String | Array}
    // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
    // 也可以使用字符串来生成“文本虚拟节点”。

完整示例：

export default {
  name: "demo",
  render(createElement) {
    return createElement("div",[
      createElement("span", "我的 div标签 =>span 标签"),
      createElement("p", [
          createElement("span", "我是 div标签 => p标签 => span标签 => 文字")
      ])
    ])
  }
}

2、JSX 【vue-cli脚手架需要额外安装这个 Babel插件】

　　你可能会觉得上面这种代码写起来很痛苦，所以Vue提供了 JSX 语法，它可以让我们回到更接近于模板的语法上。

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})