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一个函数返回包含所有插槽的对象