vue.js 实践总结（二）Render 函数

上一篇说了项目搭建和结构，这篇说说vue 的render 函数，比较核心的概念。去年写过一点react，因此知道render 函数是用来建立虚拟dom 的，那个时候写 jsx 仍是不亦乐乎的。列出几个问题做为这篇的结构：

• render 函数的做用？
• 组件中的render 函数何时执行？
• 何时须要在组件中写 jsx ？

常遇到这个问题：

[Vue warn]: Failed to mount component: template or render function not defined

这个问题是因为当前写的组件没注册为vue 组件，或者组件定义中没有template/render，因此组件无法和具体的element 挂载到一块儿，没法完成渲染。

render 的做用

render 函数其实是template 的底层方法，经过调用createElement(h)来建立dom节点，实际上做用就是负责组件视图渲染的！createElement是render的核心方法。Vue编译的时候会把template 编译为对应的render 方法，因此有了render方法就能够不写template 了！

看实例：

<template>
  <div class="right-panel">
     <div class="right-panel-header">{title}</div>
     <div class="right-panel-content">
        {content}
     </div>
  </div>
</template>
复制代码

若是不写template，对应的render 则是

render(h) {
  return (
      <div class="right-panel">
        <div class="right-panel-header">{this.title}</div>
        <div class="right-panel-content">
          {this.content}
        </div>
      </div>
    );
}
复制代码

从生命周期出发，render执行时机

仍是得把组件的生命周期搬出来，created 钩子函数是组件injection和reactivity 属性初始化后，好比props、data 初始化，后面关键的：若是有template，则把视图编译为render function，若是没有则直接调用被override 的render 方法建立虚拟dom节点，而且把组件对应的 htmlElement 替换为 组件的dom 结构和数据，最后触发mounted 钩子。

因此执行顺序是 beforeMount -- render(h, data) -- mounted .

何时须要定义render

上面那个实例，panel content 内容能够是外部传入的一段内容(this.$props.content)，假如内容很复杂呢，假如这个panel 组件须要接受用户自定义的复杂content 呢？ 这时候就须要接受外部传入的函数来渲染一段dom。 这样panel 只是个容器，把内容渲染交给外部模块，其实是组件拆分和模块化的思想，使得panel 组件能够更好的复用。

咱们把panel 的render 函数改成能够接受外部函数：

render(h) {
    let contentNode = (<div>default content</div>);
    if (this.contentRender && this.contentRender instanceof Function) {
      contentNode = this.contentRender(h, this.data); 
// 把数据用外部函数来渲染成用户想要的结构
    }
    console.warn(`rendering...`);
    return (
      <div class="right-panel">
        <div class="right-panel-header">Panel Header</div>
        <div class="right-panel-content">
          {contentNode}
// 插入dom 结构
        </div>
      </div>
    );
  }
复制代码

contenRender 的定义能够是这样的：

contentRender (h, data) { 
   return (<div>Current Data: {data['app']}</div>); 
},
复制代码

总结

render 真的颇有趣，其实际上就是jquery 时代的 建立dom，构建dom tree 的过程 其实是生成VNode 虚拟DOM节点的过程，VNode 能够被vue.js 映射为真实的DOM tree。 掌握了render ，就能够自由构建可复用的组件容器。建议详细阅读官方文档，很是有用。

一些思考：

开发一个前端项目，不单单是视图和组件逻辑，更重要的是数据服务，现代化前端几乎都是数据驱动的。由于一个app 在组件初始化时完成了数据和视图绑定，对视图的监听，随着app 的运行，其实是不断变化的数据在驱动视图的变化。

基于MVC 的架构或 MVVM的架构，在不断写组件的过程当中，咱们不断反思该如何写一个组件，怎么把多个组件集成到一个复杂组件中，组件中的逻辑部分是否应该合理拆分出其余几个通用的模块/类。

好比api service 单独处理api相关的，api service 里面的网络请求有能够单独出 network 层，为了方便替换net 请求库，还有许多通用的数据格式转换层，都是能够单独成类或者service的概念。

参考文章：

官方文档：渲染函数 & JSX

说说 VNode 节点

支持 jsx 语法的插件，transform-vue-jsx

被误解的MVC和被神化的MVVM，rethinking-mvc-mvvm