彻底弄懂 Vue2中的配置项render |
您所在的位置：网站首页 › vue的template配置项 › 彻底弄懂 Vue2中的配置项render |
彻底弄懂 Vue2中的配置项render
|
持续创作，加速成长！这是我参与「掘金日新计划 · 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 是这样初始化的： new Vue({ el: '#app', template: `lazy_tomato`, }) 复制代码 render 选项替换成 render 的写法: new Vue({ el: '#app', render: (h) => { return h('h1', 'lazy_tomato') }, }) 复制代码上述两个案例，展示的效果一样，都会展示一个 h2标签，内容为 lazy_tomato。 代码层面的区别是：配置项template 变成了 render 。 template的写法我可以理解，类似于html的语法，但是 render 的写法不理解。 学习 render 官方对 render的介绍：v2.cn.vuejs.org/v2/api/#ren… 官方介绍截图：注意事项： 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 ) 复制代码说一下原因： 首先要知道 Vue项目打包输出的 Vue.js 有很多种版本的。 而 Vue.js 本身又分很多模块，其中将template选项转换为 VNode 的模块呢，叫模板编译模块。模板编译主要做的操作：将我们的 template 选项 转换成 render 函数。 但是模板编译这个阶段，并不是必须在浏览器上才能运行。 可以借助 webpack, 在代码打包的时候，就提前(将 template选项 转换成 render 函数)。 所以 Vue.js 有这么两个版本、 完整版 ： 核心逻辑 + 模板编译的源码。 (我们上述的演示案例，引入的就是完整版， Vue.js) 运行时/精简版（runtime）: 仅包含核心逻辑。 (vue-cli 中引入的 vue-runtime.js)而我们 vue-cli 构建的项目，引入的是精简版的Vue.js。没有模板编译的代码，也就不能解析template选项，所以传入 template选项 会报错。 注意事项 我们单文件的 .vue 文件中的 标签，会被第三方插件解析vue-template-compiler。 render选项的返回值是 VNode 节点。 end 综上所述:Vue 所有的渲染逻辑都是基于 render 函数来的 如果传入了 template选项，最终还是转换为 render函数。 如果传入了 render选项，render函数 = render选项。 相同点，不同点 两者目的都是一样的，定义 render函数（渲染函数）。 区别是 template选项 需要 模板编译模块代码的处理，才能生成 render函数。 |
【本文地址】
今日新闻 |
推荐新闻 |