vue:render函数

一、Virtual Dom（虚拟DOM）
引出：
Vue.js 2.x 与 Vue扣 1.x 最大的区别就在于 2.x 使用了 Virtual Dom （虚拟 DOM ）来更新 DOM节点，提升擅染性能。一般我们的组件模板都是template当中的，但是vue编译时，都会解析为Virtual Dom。react和vue都是用了虚拟dom，那何为Virtual DOM呢？？？？

首先，我们要知道，Virtual DOM并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，当状态发生变化时，Virtual Dom会进行 Diff 运算，来更新只需要被替换的 DOM，而不是全部重绘。相比于DOM，性能会好很多。

我们可以先看一下Virtual DOM的运行过程：
在这里插入图片描述
使用 Virtual Dom 就可以完全发挥 JavaScript 的编程能力。在此可以先做一个了解。在多数场景中，我们使用 template就足够了，但在一些特定的场景下，使用 Virtual Dom 会更简单。

二、Render函数

render的实质就是生成template模板，通过调用一个方法来生成，而这个方法是通过render方法的参数传递给他的；通过这三个参数，可以生成一个完整的模板

具体怎么用，看下例子，一对比便知：
1、未使用render函数

Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

2、使用render函数
i）第一种写法：直接写入

renderContent (createElement, { node, data, store }) {
    return createElement(
        'span',{
            'class': {
                'node-disabled': data.is_forbidden === '2'
            },
            attrs: {
                id: type
            },
            style: {
                'float': 'right',
                'margin-top': '10px',
                'margin-right': '10px'
            },
            on: {
                click: (e) => {
                    e.stopPropagation();
                }
            }
        }
    );
    //                console.log(node);
})

ii）第二种方法：用变量名字

renderContent (createElement, { node, data, store }) {
    let prop = {
        'class': [
            'filter-tree-content',
            parseInt(data.is_own) === 1 ? 'green' : ''
        ],
        domProps: {
            innerHTML: data.alias
        }
    };
    return createElement(
        'span', prop
    );
    //                console.log(node);
})

iii）第三种写法：嵌套写法

renderContent (createElement, { node, data, store }) { // div 标签下包裹一个a标签
    let prop = { // 设置属性
        'class': [
            'v-text',
            'pack'
        ],
        domProps: {
            innerHTML: '...'
        },
        on: {
            click: ($event) => { // 添加事件
                this.clickHandler(data, $event);
            }
        }
    };
    return createElement(
        'div', // 创建标签
        {
            'class': { // 设置类名
                'node-disabled': data.is_forbidden === '2'
            }
        },
        [createElement('span', {
            domProps: {
                innerHTML: node.label
            },
            'class': {
                textContent: this.isClass
            },
            style: {
                backgroundSize: '15px 15px'
            }
        })]
    );
}

与template对比：

区别：
没有显示的模板内容，而是通过render方法生成
使用了createElement方法

createElement方法，通过render函数的参数传递进来，有三个参数：
第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数
第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的

三、JSX
上面的参数的类型和用法太多，按顺序传参不方便，我们可以用JSX进行优化。为了让 Render 函数更好地书写和阅读，Vue提供了插件 babel-plugin-transform-vue-jsx 来支持 JSX 语法。何为JSX，我们可以参考：JSX的简介和用法。

猜你喜欢