彻底弄懂 Vue2中的配置项render

tomato7777
101 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 22 天，点击查看活动详情

彻底弄懂 Vue2中的配置项render

start

在借助 vue-cli 创建的 vue2 项目中的 main.js 是这样初始化 Vue 的：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: (h) => h(App),
}).$mount('#app')

上述的render是什么意思？今天来彻底弄懂它。

template选项

在我最开始学习 Vue 的时候，初始化 Vue 是这样初始化的：

<body>
  <div id="app">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      template: `<h1>lazy_tomato</h1>`,
    })
  </script>
</body>

render 选项

替换成 render 的写法:

<body>
  <div id="app">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      render: (h) => {
        return h('h1', 'lazy_tomato')
      },
    })
  </script>
</body>

上述两个案例，展示的效果一样，都会展示一个 h2标签，内容为 lazy_tomato。

代码层面的区别是：配置项template 变成了 render 。

template的写法我可以理解，类似于html的语法，但是 render 的写法不理解。

学习 render

官方对 render的介绍：

v2.cn.vuejs.org/v2/api/#ren…

官方介绍截图：

image.png

结论

  • render 是字符串模板的代替方案。
  • render可以代替template。
  • render本身是一个函数，它接受一个参数createElement。
  • render返回值是一个 VNode。
  • createElement的返回值也是VNode。

注意事项：

VNode 是什么？

VNode，虚拟节点 (virtual node)，对应真实DOM的一个js对象。可以用来组成虚拟DOM树。

render接受一个参数可以叫 createElement, 也可以叫 h。（函数接受参数的名称可以随意，例如：main.js 用的h命名）

render 和 template 差异

如果你在 vue-cli 创建的 vue2 项目使用 template 选项，控制台会报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

说一下原因：

  1. 首先要知道 Vue项目打包输出的 Vue.js 有很多种版本的。
  2. 而 Vue.js 本身又分很多模块，其中将template选项转换为 VNode 的模块呢，叫模板编译模块。

模板编译主要做的操作：将我们的 template 选项 转换成 render 函数。

  1. 但是模板编译这个阶段，并不是必须在浏览器上才能运行。

  2. 可以借助 webpack, 在代码打包的时候，就提前(将 template选项 转换成 render 函数)。

  3. 所以 Vue.js 有这么两个版本、

    • 完整版 ： 核心逻辑 + 模板编译的源码。 (我们上述的演示案例，引入的就是完整版， Vue.js)
    • 运行时/精简版（runtime）: 仅包含核心逻辑。 (vue-cli 中引入的 vue-runtime.js)

  4. 而我们 vue-cli 构建的项目，引入的是精简版的Vue.js。没有模板编译的代码，也就不能解析template选项，所以传入 template选项 会报错。

注意事项

  1. 我们单文件的 .vue 文件中的 <template></template> 标签，会被第三方插件解析vue-template-compiler。
  2. render选项的返回值是 VNode 节点。

end

综上所述:

Vue 所有的渲染逻辑都是基于 render 函数来的

  • 如果传入了 template选项，最终还是转换为 render函数。

  • 如果传入了 render选项，render函数 = render选项。

相同点，不同点

  • 两者目的都是一样的，定义 render函数（渲染函数）。
  • 区别是 template选项 需要 模板编译模块代码的处理，才能生成 render函数。
avatar
文章
阅读
粉丝