Vue.js render函数那些事儿

665

大多时候,我会使用template, vue单文件去渲染组件。虽然知道Vue中有个render函数,但却很少在项目中去主动使用它。使用最多的地方是在使用一些UI框架的时候,比如iview table中的按钮操作,会使用到render函数。另外平时在阅读一些Vue UI框架源码的时候,也时常能遇到使用render函数的地方,这也激发了自己研究学习的欲望。如果你也感兴趣,那就继续阅读吧。

在本文中,会有如下内容:

  • 什么是Vue render函数
  • Vue编译器如何处理render函数
  • 创建一个组件
  • 在render函数中使用指令
  • Vue渲染函数中的事件绑定
  • 模板覆盖的实际用例

让我们开始吧!

什么是Vue render函数

Vue.js模板功能强大,几乎可以满足我们在应用程序中所需的一切。但是,有一些场景下,比如基于输入或插槽值创建动态组件,render函数可以更好地满足这些用例。

那些来自React世界的开发者可能对render函数非常熟悉。通常在JSX中使用它们来构建React组件。虽然Vue渲染函数也可以用JSX编写,但我们将继续使用原始JS,有助于我们可以更轻松地了解Vue组件系统的基础。。

每个Vue组件都实现了一个render函数。大多数时候,该函数将由Vue编译器创建。当我们在组件上指定模板时,该模板的内容将由Vue编译器处理,编译器最终将返回render函数。渲染函数本质上返回一个虚拟DOM节点,该节点将被Vue在浏览器DOM中渲染。

现在又引出了虚拟DOM的概念,"虚拟DOM到底是什么?"

虚拟文档对象模型(或"DOM")允许Vue在更新浏览器之前在其内存中渲染组件。这使一切变得更快,同时也避免了DOM重新渲染的高昂成本。因为每个DOM节点对象包含很多属性和方法,因此使用虚拟DOM预先在内存进行操作,可以省去很多浏览器直接创建DOM节点对象的开销。

Vue更新浏览器DOM时,会将更新的虚拟DOM与上一个虚拟DOM进行比较,并仅使用已修改的部分更新实际DOM。这意味着更少的元素更改,从而提高了性能。Render函数返回虚拟DOM节点,在Vue生态系统中通常称为VNode,该接口是允许Vue在浏览器DOM中写入这些对象的接口。它们包含使用Vue所需的所有信息。 Vue的下一版本将包含一个全新的虚拟DOM实现,该实现将比目前更快。 React,Riot,Inferno等许多其他框架也使用虚拟DOM的概念。

我们可以在任何Vue组件中实现Vue render函数。同样,由于Vue的数据响应性,每当组件的数据得到更新时,都会再次调用render函数。

这是一个简单的示例,说明如何直接使用组件中的render函数去渲染h1标签:

new Vue({
  el: '#app',
  render(createElement) {
    return createElement('h1', 'Hello world');
  }
});

有一些内置组件可以利用渲染函数的功能,例如transitionkeep-alive。这些组件直接在渲染函数中操纵VNode。如果Vue没有提供这个函数特性,这些功能将无法实现。

Vue编译器如何处理render函数?

大多数时候,Vue渲染函数将在项目构建期间由Vue编译器进行编译(例如,使用Webpack)。因此,编译器不会最终出现在您的生产代码中,从而减小了包的体积。这就是为什么当您使用"单个文件组件"时,除非我们确实需要/想要,否则您实际上不需要使用render函数。

但是,如果我们想在代码中使用编译器,则可以使用带有编译器的Vue版本。简而言之,我们正在使用Vue编译器来编译自定义模板。假设我们在做一个电商项目,那么可以将其注入购物车,从而可以拥有更多的控制。

我们编写了一个实现自定义渲染功能的组件,该功能可获取用户创建的模板并替换我们的默认模板。

这是一个如何使用编译器将模板字符串编译为渲染函数的快速示例:

const template = `
<ul>
  <li v-for="item in items">
   {{ item }}
  </li>
</ul>`;

const compiledTemplate = Vue.compile(template);

new Vue({
  el: '#app',
  data() {
    return {
      items: ['Item1', 'Item2']
    }
  },
  render(createElement) {
    return compiledTemplate.render.call(this, createElement);
  }
});

如您所见,编译器将返回一个对象(compiledTemplate),其中包含准备使用的render函数。

创建一个组件

具有渲染功能的组件没有模板标记或属性。相反,他们定义了一个称为render的函数,该函数接收一个createElement(renderElement:String | Component,define:Object,children:String | Array)参数(由于某种原因,通常别名为h,归咎于JSX)并返回使用该函数创建的元素。其他一切保持不变。

export default {
  data() {
    return {
      isRed: true
    }
  },

  /*
   * 和下边使用template相同
   * <template>
   *   <div :class="{'is-red': isRed}">
   *     <p>Example Text</p>
   *   </div>
   * </template>
   */
  render(h) {
    return h('div', {
      'class': {
        'is-red': this.isRed
      }
    }, [
      h('p', 'Example Text')
    ])
  }
}

在render函数中使用指令

Vue模板具有各种便捷功能,以便向模板添加基本逻辑和绑定功能。渲染函数无法访问它们。取而代之的是,它们必须以纯Javascript实现,对于大多数指令而言,这是相当简单的。

v-if

这个很简单。除了使用v-if之外,还可以在createElement中调用普通的if(expr)语句。

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

这些都可以在渲染函数中用JavaScript的if/else 和 map来重写:

props: ['items'],
render: function (h) {
  if (this.items.length) {
    return h('ul', this.items.map(function (item) {
      return h('li', item.name)
    }))
  } else {
    return h('p', 'No items found.')
  }
}

v-for

v-for可以使用for-of,Array.map,Array.filter等多种迭代方法中的任何一种来实现。我们可以将它们以非常有趣的方式组合在一起,以实现过滤或分割数据。

例如,我们可以替换

<template>
  <ul>
    <li v-for="item of list">
      
    </li>
  </ul>
</template>

render(h) {
  return h('ul', this.list.map(item => h('li', item.name)));
}

v-model

要记住的一件事是,v-model就是绑定属性为value(还可以是其他属性),只要触发input事件并设置data属性的简写形式。不幸的是,渲染函数没有这么简写。我们必须自己实现它,如下所示。

render(h) {
  return h('input', {
    domProps: {
      value: this.myBoundProperty
    },
    on: {
      input: e => {
        this.myBoundProperty = e.target.value
      }
    }
  })
}

等效于:

<template>
  <input :value="myBoundProperty" @input="myBoundProperty = $event.target.value"/>
</template>

<template>
  <input v-model="myBoundProperty"/>
</template>

v-bind

属性和属性绑定以attrs,props和domProps(类似于value和innerHTML之类)的形式放置在元素定义中。

render(h) {
  return h('div', {
    attrs: {
      // <div :id="myCustomId">
      id: this.myCustomId
    },

    props: {
      // <div :someProp="someValue">
      someProp: this.someValue
    },

    domProps: {
       // <div :value="someValue">
      value: this.someValue
    }
  });
}

附带说明一下,类和样式绑定直接在定义的根进行处理,而不是作为attrs,props或domProps处理。

render(h) {
  return h('div', {
    // "class" 是JS中的保留字, 所以需要引号包起来.
    'class': {
      myClass: true,
      theirClass: false
    },

    style: {
      backgroundColor: 'green'
    }
  });
}

v-on

事件处理程序也可以直接在on(或nativeOn,与组件的v-on.native效果相同)中直接添加到元素定义中。

render(h) {
  return h('div', {
    on: {
      click(e) {
        console.log('我点击了!')
      }
    }
  });
}
  1. 修饰符可以在处理程序内部实现:
  • .stop -> e.stopPropagation()
  • .prevent -> e.preventDefault()
  • .self -> if (e.target !== e.currentTarget) return
  1. 键盘修饰符
  • .[TARGET_KEY_CODE] -> if (event.keyCode !== TARGET_KEY_CODE) return
  • .[MODIFIER] -> if (!event.MODIFIERKey) return

插槽

可以通过this.$slots作为createElement()节点的数组来访问插槽。

<div id="app">
<myslot>
    <div slot="slot1">this is slot1</div>
    <div slot="slot2">This is slot2 </div>
</myslot>

<script>
var app = new Vue({
  el: '#app'
})
</script>
Vue.component('my-slot', {
  render: function(h) {
    const child = h('div', {
      domProps: {innerHTML: 'this is child'}
    });

    return h(
      'div',
      [
        child,
        this.$slots.slot1,
        this.$slots.slot2
      ]
    )
  }
})

作用域插槽存储在this.$scopedSlots[scope](props:object)中,作为返回createElement()节点数组的函数。

<div id="app">
<myslot>
    <template scope="props">
        <div>{{props.text}}</div>
    </template>
</myslot>

<script>
var app = new Vue({
  el: '#app'
})
</script>
Vue.component('my-slot', {
  render: function(h) {
    const child = h('div', {
      domProps: {innerHTML: 'this is child'}
    });

    return h(
      'div',
      [
        child,
        this.$scopedSlots.default({
          text: 'hello scope'
        })
      ]
    )
  }
})

Vue渲染函数中的事件绑定

createElement函数可以接收称为数据对象的参数。该对象可以具有多个属性,这些属性与我们在标准模板中使用的v-bind:on等指令等效。这是带有按钮的简单计数器组件的示例,该按钮可以增加点击次数。

new Vue({
  el: '#app',
  data() {
    return {
      clickCount: 0,
    }
  },
  methods: {
    onClick() {
      this.clickCount += 1;
    }
  },
  render(h) {
    const button = h('button', {
      on: {
        click: this.onClick
      }
    }, 'Click me');
    
    const counter = h('span', [
      'Number of clicks:',
      this.clickCount
    ]);
    
    return h('div', [
      button, counter
    ])
  }
});

但是数据对象不限于事件绑定!我们也可以像使用v-bind:class指令一样将CSS类应用于元素。

new Vue({
  el: '#app',
  data() {
    return {
      clickCount: 0,
    }
  },
  computed: {
    backgroundColor() {
      return {
        'pink': this.clickCount%2 === 0,
        'green': this.clickCount%2 !== 0, 
      };
    }
  },
  methods: {
    onClick() {
      this.clickCount += 1;
    }
  },
  render(h) {
    const button = h('button', {
      on: {
        click: this.onClick
      }
    }, 'Click me');
    
    const counter = h('span', {
      'class': this.backgroundColor,
    }, [
      'Number of clicks:',
      this.clickCount
    ]);
    
    return h('div', [
      button, counter
    ])
  }
});

模板覆盖的实际用例

我认为了解Vue的幕后工作非常有趣。要知道是否能够最有效地使用工具,唯一的方法是确切地了解它的工作方式。

这并不是说我们应该开始将所有模板都转换为render函数,但是有时它们可以派上用场,所以我们至少应该知道如何使用它们。

在上面的示例中,我展示了如何在组件中使用自定义render函数,该函数允许我们的某些组件可重写。

首先,让我们创建初始模板。

<div id="app">
  <heading>
    <span>Heading title is: {{ title }}</span>
  </heading>
</div>

在将要安装Vue应用程序的div内,我们编写一个自定义模板。接下来,我们希望模板覆盖我们将要创建的标题组件的默认版本。

我们要做的第一件事是遍历自定义模板,并使用Vue编译器对其进行预编译

const templates = [];
const templatesContainer = document.getElementById('app');

// 我们遍历每个自定义模板并对其进行预编译
for (var i = 0; i < templatesContainer.children.length; i++) {
  const template = templatesContainer.children.item(i);
  templates.push({
    name: template.nodeName.toLowerCase(),
    renderFunction: Vue.compile(template.innerHTML),
  });
}

然后,让我们创建标题组件:

Vue.component('heading', {
  props: ['title'],
  template: `
    <overridable name="heading">
      <h1>
        {{ title }}
      </h1>
    </overridable>`
});

现在,它只是一个简单的组件,具有一个名为title的属性。默认模板将渲染带有标题的h1。我们将用随后创建的overridable组件包装该组件。

这是我们将使用自定义渲染功能的地方。

Vue.component('overridable', {
  props: ['name'],
  render(createElement) {
    // 我们使用在初始化应用程序时创建的模板数组
    const template = templates.find(x => x.name === this.name);

    // 当没有自定义模板时,我们将使用默认插槽返回默认内容。
    if (!template) {
      return this.$slots.default[0];
    }
    
    // 使用预编译的render函数
    return template.renderFunction.render.call(this.$parent, createElement);
  }
});

然后,让我们挂载Vue应用程序:

new Vue({
  el: '#app',
  template: `<heading title="Hello world"></heading>`
});

在此示例中,我们可以看到使用了默认模板,因此它是一个标准的h1标签。

如果将自定义模板添加到div#app内,则会看到标题组件会被渲染成我们指定的自定义模板。

最后

如果使用render函数创建组件,让你感觉非常繁琐。那么还可以尝试babel-plugin-transform-vue-jsx插件,就可以像在React中那样轻便(属性细节略有不同,具体参考插件文档)。

总体而言,使用render函数非常有趣,并且在v3.0中也派上了用场。 Vue渲染函数是Vue本身的基本组成部分,因此,我真的认为花一些时间并彻底理解该概念(特别是长期使用该框架)很有价值。随着Vue.js的发展和效率的提高,我们平时积累的这些底层基础知识也有助于我们的发展。

换句话说,了解Vue render函数只是你技术进步中的一小步,但很重要。 :)