Vue-router原理:6、render函数

Vue-router原理:6、render函数

虽然使用完整版Vue可以解决上面的问题，但是由于带有编译器，体积比运行时版本大10k左右，所以性能比运行时版要低。

那么这一小节我们使用运行时版本来解决这个问题。

我们知道，完整版中的编译器的作用就是将template模板转成render函数，所以在运行时版本中我们可以自己编写render函数。

但是在这你肯定也有一个问题，就是在单文件组件中，我们一直都是在写<template></template>,并且没有写render函数，

但是为什么能够正常的工作呢？这时因为在打包的时候，将<template>编译成了render函数，这就是预编译。

最终代码如下：

 //该方法需要一个参数为Vue的构造函数。
  //当然也可以使用全局的_Vue.
  initComponents(Vue) {
    Vue.component("router-link", {
      props: {
        to: String,
      },
      // template: '<a :href="to"><slot></slot></a>',
      render(h) {
     
        return h(
          "a",
          {
            attrs: {
              href: this.to,
            },
          },
          [this.$slots.default]
        );
      },
    });
  }

注意：在测试之前一定要将根目录下的vue.config.js文件删除掉，这样当前的环境为“运行时”环境.