vue-render函数

vue-render函数

模板与渲染函数#
Vue 被编译成虚拟 DOM 渲染函数。Vue 还提供 API 允许我们跳过编译步骤并直接编写动态函数。在处理高度的逻辑时，渲染函数比模板更灵活，因为您可以使用 JavaScript 的全部功能来处理vnode。
模版与渲染函数（render（））

<script>
export default {
  name: 'Icon',
  created () {
    console.log('create')
  },
  mounted () {
    console.log('mounted')
  },
  beforeUpdate () {
    console.log(this.number)
  },
  updated () {
    console.log('updated', this.number)
  },

  methods: {
    changNumber () {
      this.number++
    }
  },
  data () {
    return {
      number: 0
    }
  },
  render (h) {
    console.log('render', this)
    const span = (
    <div>
	<span onClick={this.changNumber}>{this.number}</span>
		<div>{this.$slots.default}</div>
		<div>{this.$slots.footer}</div>
	</div>
	)
    return span
  }

}
</script>

官网slot写法

// <div><slot /></div>
<div>{this.$slots.default()}</div>

// <div><slot name="footer" :text="message" /></div>
<div>{this.$slots.footer({ text: this.message })}</div>

函数式组件

之前创建的锚点标题组件是比较简单，没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)

<script>
export default {
  name: 'Icon',
  functional: true,
  created () {
    console.log('create')
  },
  mounted () {
    console.log('mounted')
  },
  beforeUpdate () {
    console.log(this.number)
  },
  updated () {
    console.log('updated', this.number)
  },

  methods: {
    changNumber () {
      this.number++
    }
  },
  data () {
    return {
      number: 0
    }
  },
 render (h, context) {
    console.log('render')
    const { props, children, slots, scopedSlots, data, parent, listeners } = context
    console.log(props, children, slots, scopedSlots, data, parent, listeners)
    const span = (<span >{children}</span>)

    return span
  }

}
</script>

-组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context 参数，并将
this.$slots.default 更新为 context.children，然后将 this.level 更新为
context.props.level。