vue 2.5.14以上版本render函数不再支持直接返回字符串,必须返回数组或vnode节点,如果返回字符串的话,渲染为空。详情可见源码。

  1. function createFunctionalComponent (
  2. Ctor,
  3. propsData,
  4. data,
  5. contextVm,
  6. children
  7. ) {
  8. var options = Ctor.options;
  9. var props = {};
  10. var propOptions = options.props;
  11. if (isDef(propOptions)) {
  12. for (var key in propOptions) {
  13. props[key] = validateProp(key, propOptions, propsData || emptyObject);
  14. }
  15. } else {
  16. if (isDef(data.attrs)) { mergeProps(props, data.attrs); }
  17. if (isDef(data.props)) { mergeProps(props, data.props); }
  18. }
  19.  
  20. var renderContext = new FunctionalRenderContext(
  21. data,
  22. props,
  23. children,
  24. contextVm,
  25. Ctor
  26. );
  27.  
  28. var vnode = options.render.call(null, renderContext._c, renderContext);
  29.   // 此处判断如果为vnode或数组,才返回
  30. if (vnode instanceof VNode) {
  31. return cloneAndMarkFunctionalResult(vnode, data, renderContext.parent, options)
  32. } else if (Array.isArray(vnode)) {
  33. var vnodes = normalizeChildren(vnode) || [];
  34. var res = new Array(vnodes.length);
  35. for (var i = 0; i < vnodes.length; i++) {
  36. res[i] = cloneAndMarkFunctionalResult(vnodes[i], data, renderContext.parent, options);
  37. }
  38. return res
  39. }
  40. }

  

vue 2.5.14以上版本render函数不支持返回字符串的更多相关文章

  1. Vue.js之render函数基础

    刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...

  2. vue之Render函数

    (1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...

  3. 何时/如何使用 Vue3 render 函数

    什么是 DOM? 如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页.所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作.例如: let it ...

  4. vue render函数 函数组件化

    之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...

  5. vue render函数

    基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...

  6. 大白话Vue源码系列(03):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  7. 大白话Vue源码系列(04):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  8. Vue中的render函数随笔

    使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...

  9. Vue学习笔记进阶篇——Render函数

    基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template ...

随机推荐

  1. Nginx配置ssl安全证书

    server { listen 443; server_name www.loaclhost.com; ssl on; root /web; ssl_certificate /data/ssl/xxx ...

  2. Windows mysql默认字符集修改

    一.通过MySQL命令行修改: set character_set_client=utf8; set character_set_connection=utf8; set character_set_ ...

  3. hive两大表关联优化试验

    呼叫结果(call_result)与销售历史(sale_history)的join优化: CALL_RESULT: 32亿条/444G SALE_HISTORY:17亿条/439G 原逻辑 Map: ...

  4. Z-score标准化[转载]

    转自:https://blog.csdn.net/Orange_Spotty_Cat/article/details/80312154 1.意义 Z-Score通过(x-μ)/σ将两组或多组数据转化为 ...

  5. 121. Best Time to Buy and Sell Stock(股票最大收益)

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  6. DHCP服务器配置实践

    实验背景:在LINUX系统上为一园区网络配置DHCP服务器,给网络内各主机自动分配IP地址,地址池范围为:192.168.X.100~192.168.X.200,配置作用域选项,其中网关为:192.1 ...

  7. nodejs+express工程 在npm install之后或使用npm install bootstrap命令安装bootstrap之后

    nodejs+express工程 在npm install之后或使用npm install bootstrap命令安装bootstrap之后引入bootstrap文件 如果你的静态资源存放在多个目录下 ...

  8. windows下注册tomcat服务以及设置jvm参数

    注册服务: 1 >cd /d D:\Java\tomcat-7.0.57-Css\bin //进入目录 1 >service.bat install  //注册服务,同理删除服务为 rem ...

  9. Mysql性能调优工具Explain结合语句讲解

    Explain简称执行计划,可以模拟SQL语句,来分析查询语句或者表结构是否有性能瓶颈.Explain的作用有哪些,可以看到哪些?可以看到表的读取顺序,数据读取操作的操作类型,哪些索引可以使用,哪些索 ...

  10. UVA10529 Dumb Bones

    UVA10529 Dumb Bones go to solution 设$f[i]$表示叠$i$个的骨牌的期望 $O(n)$做法 #include<iostream> #include&l ...