Vue之render函数

摘要:
如果Vue选项中的render函数存在,Vue构造函数将不会从从template选项提取的HTML模板或el选项指定的mount元素编译render函数//直接从'Vue/dist/Vue引入vueimportVue的完整版本。js'可以说是非常美味。在指定使用vue的完整版本之后。js,毫无疑问,我们没有使用render函数,直接使用传统方法是可以的。vue运行时和渲染函数用于解决这个问题。

render函数是vue中的一个重要函数

文档地址:https://cn.vuejs.org/v2/api/#render

类型

(createElement: () => VNode) => VNode

详细

字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。

Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

在开发中的使用

//创建Vue实例对象---vm
new Vue({
    el:'#app',
    //render函数完成了这个功能:将App组件放入容器中
  render: h => h(App),

//传统方式为什么不行?
// template:`<h1>你好啊</h1>`,
    // components:{App},

})

为什么要使用render函数?传统方式为什么不行呢?要说明白这2个问题,那么我们必须说明引入的vue版本

关于不同版本的Vue:
    
        1.vue.js与vue.runtime.xxx.js的区别:
                (1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
                (2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

        2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用
            render函数接收到的createElement函数去指定具体内容。
 
我们可以看到在node_modules/vue/dist下面有众多vue的版本 
Vue之render函数第1张

 在本地中查看,我们可以看到只有完整版的vue.js为336KB,其他运行版的都是小于336KB的,这是因为运行版的vue.js是没有模板解析器的

Vue之render函数第2张

这就是为什么我们需要使用 render函数接收到的createElement函数去指定具体内容,并且为什么使用传统方式不行的原因,是因为我们引入的vue版本默认是运行版本的

//这里默认引入的vue版本,默认是vue.runtime.js,也就是235KB那个
import Vue from 'vue'

我们这里第一时间都会想到我干嘛要去用运行版的vue.runtime.js,我脑子坏掉了吗?我直接引入完整版的vue版本不行吗?干嘛非得搞些奇奇怪怪的东西,我就要用带模板解析器的,一步到位,不香吗?

//直接引入完整版vue
import Vue from 'vue/dist/vue.js'

可以说非常香,指定使用完整版的vue.js后,毫无疑问的是我们不使用render函数,直接使用传统方式也是ok的。

那我觉得开发人员脑子坏掉了,没事找事,是吧,我寻思着我也不缺那336-235=101KB空间的人,内存空间都是G为单位,我完全可以任性点,嚣张点。

那我们来看看开发人员的思路(为方便说明以撸猫为例子)

vue完整版:核心功能+模板解析器

撸猫:找一家猫店+直接买一只猫

vue运行版:核心功能

撸猫:找一家猫店+在店里撸猫

所以说,我们完全可以想撸猫的时候,去找一个撸猫的地方,撸撸猫,不一定非得去买一只猫,就像我修房子需要工人,我只需要租工人就行了,修完房子,结完钱,他们就可以走了,总不至于我买几个工人给我修房子(当然是不可能的,只是为了让大家理解vue完整版与运行版的区别),修完房子,工人还在,直接不走了,想想都可怕,我还得养工人,不是一直在浪费我的时间,浪费我的空间吗?

所以在开发中,模板解析器使用后,就不必一直存在。通过vue运行版和render函数来解决这个问题。

免责声明:文章转载自《Vue之render函数》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇使用插件bootstrap-table实现表格记录的查询、分页、排序等处理树莓派设置固定IP地址下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue框架前后端分离项目之订单表、立即付款接口及前端、支付成功回调等相关内容-131

1 订单表设计 1 两张表 -一个订单可能包含多门课程 -订单表:订单号,订单生成时间,订单总价格。。。(订单跟订单详情是一对多的关系)    -订单详情表:order,course,该课程的价格。。。             from django.db import models​from user.models import Userfr...

vue(js)点击目标div以外区域将目标div隐藏

今天开发新项目的时候,有个需求,点击一个div 展示出个弹出窗 弹出窗标题的颜色要跟点击的div图标颜色一致, 所以这就需要我遍历一下多个数据, 然后需要点击弹出div的外部其他区域,隐藏这个div。所以 有了以下操作! 这个点击事件@click.stop="isPop(item.event)" 加上.stop 起阻止冒泡的效果,这里很重要,具体原因就暂...

Vue生态圈之----Axios学习笔记

API 首先,我们把axios所有的【API】和【配置】及【返回内容】列一下: //通过配置发送请求 axios(config) axios(url[,config]) //别名 axios.request(config); axios.get(url[,config]); axios.delete(url[,config]); axios.head(u...

vue 多语言 vue-i18n 按需加载,异步调用

http://kazupon.github.io/vue-i18n/zh/guide/lazy-loading.html 一次加载所有翻译文件是过度和不必要的。 因为可能一直用中文,那么就不会用到英文的数据,就没必要去加载。只在请求的时候去加载它 1.新建i18n.js import Vue from 'vue' import VueI18n from '...

vue项目 elemnet 升级版本

打开cmd命令 先卸载项目中的 node_modules rimraf node_modules 卸载项目中的element-ui npm uninstall element-ui -S 重新安装element-ui npm install element-ui -S 安装依赖 npm install npm run dev 飞起~  ...

Vue 调用微信扫一扫功能

这个功能呢就是公众号里面埋一个网页,有个功能扫一扫,调用微信的js-sdk来弄; https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 官方文档 第一步绑定域名,就是你在公众号登录之后要设置域名,还有白名单,这个喊后端去弄,前端又不晓得哪些是白名单,域名是好多 第二部:安...