vue的渲染函数和jsx

基础认识

vue在正常情况下使用模板创建HTML，但是在一些情况下，需要js的完全变成能力，可以使用渲染函数，比模板更加贴近编辑器
我们可以使用render渲染函数，实现一个简单的例子，例如生成带锚点的标题，

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

节点，树以及虚拟DOM

理解Dom树：每个元素都可以理解成一个节点，每个节点下面都可以有子节点，然后形成DOM树
虚拟Dom：虚拟dom其实不是真正的dou，但是它包含了页面需要渲染什么样的节点的信息，以及告诉了描述信息，常常简写成vnode，vue中虚拟dom是对由vue整个组件树建立起的虚拟dom树的称呼
createElement参数
reder渲染函数的参数
createElement（标签名，对应数据对象，）

深入数据对象

正如v-bind:class和v-bind：style在模板语法中会被特别对待，所以虚拟dom的数据对象也有对应的顶层字段，可以绑定普通的html也允许绑定v-html这样类型的指令

约束

虚拟dom必须唯一，如果需要重复很多次的元素和组件，可以使用工厂函数实现

使用js代替模板功能

v-if和v-for
只要在js中能够轻松完成的操作，vue的渲染函数就不会提供专有的替代方法，例如v-if和v-for

v-model

渲染函数没有与v-model的直接对应，必须自己实现相应的逻辑

事件，和按键修饰符

对于.passive .capture & .once 这些事件修饰符，vue提供了相应的前缀

插槽

可以使用this.&slots访问静态插槽的内容，每个插槽都是虚拟dom的数组

jsx

如果写了很多的render函数，会觉得很复杂，我们就可以使用，jsx语法（需要使用babel插件）

函数式组件

无状态组件：没有响应的数据，也没有实例（this和上下文）
组件需要的一切都是通过context传递参数的。props和children子节点的数组 slots一个函数返回包含所有插槽的对象