Vue.js render函数那些事儿

前端知否

发布于 2020-04-07 18:27:20

2.3K0

发布于 2020-04-07 18:27:20

文章被收录于专栏：前端知否

大多时候，我会使用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');
  }
});

有一些内置组件可以利用渲染函数的功能，例如transition和keep-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('我点击了!')
      }
    }
  });
}

修饰符可以在处理程序内部实现：

.stop -> e.stopPropagation()
.prevent -> e.preventDefault()
.self -> if (e.target !== e.currentTarget) return

键盘修饰符

.[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函数只是你技术进步中的一小步，但很重要。:)

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-03-26，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

ide

渲染

react

本文分享自前端知否微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度