简单谈一谈Vue中render函数

2024-04-02 19:04:59 612人浏览安东尼

摘要

目录那如何证明？如何解决？那我们为什么不采用报错提示中的第二种方式引入完整的Vue呢？补充：vue2 小例子总结：首先我们引入的vue并不是一个完整的，而是残缺版的vue(没有模板

那如何证明？

翻译如下：

大概意思是说功能不全，没有模板解析器。并且提供建议给你：1.使用render函数 2.引入带有模板解析器的vue(完整的vue)，那意思就是说vue并没有引入完整？为什么？

我们就需要去依赖的地方看看到底有没有完整引入。由于我们在引入的时候，地址直接写的就是vue，但是vue下还有很多路径

module的意思就是如果使用的es6的模块化引入方式，就使用 dist/vue.runtime.esm.js

import的确是es6的引入方式。这里面就是残缺版的没有模板解析器的vue。

如何解决？

render(createElement){

这个函数有返回值，需要return 并且这个参数createElement是一个函数，该函数可创建具体的节点//

return createElement('span','我是span')

}

那他和正常的默认生成的还是有区别的，我们先看一下常规的render函数

仅仅只是一行render:h=>h(App)

我们可以根据上方代码写成箭头函数并简写形式(仅有一个参数去掉括号，return去掉改为一行)

render:createElement => createElement('span','我是span')

接下来将参数改成h或者任意字母就和上图相似了

render:h=>h('span','我是span')

于是我们发现这样就显示出来了，如下图↓ ↓ ↓ ↓

那我们为什么不采用报错提示中的第二种方式引入完整的vue呢？

vue是由两部分组成的，

1：vue核心：包含生命周期，处理事件...

2. 模板解析器

如果合在一起，模板解析器体积占总体积的1/3，webpack在进行打包时会生成一个大的文件夹，本身模板解析器是不需要打包的，因为WEBpack已经将.vue文件变成了html,js,CSS，解析器就不再需要了。

问题来了，为什么我们创建了一个app节点而且不需要加值就可以显示出来内容呢？

为啥template放在组件里就可以被解析呢？？？这是因为有一个插件所解决的

补充：vue2 小例子

# 父组件
<template>
  <div>
    <self :render="render"></self>
  </div>
</template>
<script>
import self from '@/components/self'
export default {
  components:{
    self
  },
  data() {
    return {
      render:h=>{
        return h(
          'div',
          {class:'red'},
          'nihao'
        )
      }
    }
  },
}
</script>
<style>
  .red {
    color: red;
  }
</style>


# 子组件
<script>
export default {
  name: "SelfText",
  props: {
    render: {
      type: Function,
      default() {
        return {};
      }
    }
  },
  render(h) {
    return this.render(h);
  }
};
</script>

vue3 小例子

# 父组件
<template>
  <div>
    <self :render="render"></self>
  </div>
</template>
<script>
import self from '@/components/self'
export default {
  components:{
    self
  },
  data() {
    return {
      render:h=>{
        return h(
          'div',
          {class:'red'},
          'nihao'
        )
      }
    }
  },
}
</script>
<style>
  .red {
    color: red;
  }
</style>


# 子组件
<script>
import { h } from 'vue'
export default {
  props: {
    render: {
      type: Function,
      default() {
        return {};
      }
    }
  },
  render() {
    return this.render(h);
  }
};
</script>

在vue3中，我们还可以使用setup来返回一个渲染的函数

<script>
import { h } from 'vue'
export default {
  setup() {
    return ()=>h(
      'div',
      {class:'red'},
      'nihaonihao'
    )
  }
}
</script>
<style>
  .red {
    color: red;
  }
</style>

总结：

vue.js和vue.runtime.xxx.js的区别

（1）vue.js是完整版的Vue。包含：核心功能+模板解析器

（2）vue.runtime.xxx.js是运行版的Vue，只包含核心功能

因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

到此这篇关于Vue中render函数的文章就介绍到这了,更多相关Vue中render函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 简单谈一谈Vue中render函数

本文链接: https://lsjlt.com/news/166962.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

简单谈一谈Vue中render函数

目录那如何证明？如何解决？那我们为什么不采用报错提示中的第二种方式引入完整的vue呢？补充：vue2 小例子总结：首先我们引入的vue并不是一个完整的，而是残缺版的vue(没有模板...

99+

2024-04-02
简单谈谈Vue中的diff算法

目录概述虚拟Dom(virtual dom) 原理实现过程 patch方法 sameVnode函数 patchVnode函数 updateChildren函数结语概述 di...

99+

2024-04-02
简单谈谈Python中函数的可变参数

前言在Python中定义函数，可以用必选参数、默认参数、可变参数和关键字参数，这4种参数都可以一起使用，或者只用其中某些，但是请注意，参数定义的顺序必须是：必选参数、默认参数、可变参数和关键字参数。可...

99+

2022-06-04

函数参数简单
简单谈谈Python中的闭包

Python中的闭包前几天又有人留言，关于其中一个闭包和re.sub的使用不太清楚。我在编程网搜索了下，发现没有写过闭包相关的东西，所以决定总结一下，完善Python的内容。 1. 闭包的概念首先还得从...

99+

2022-06-04

简单 Python
简单谈谈centos7中配置php

安装： yum -y install php php-devel php-pear php-mysql 配置： vim /etc/php.i...

99+

2022-06-04

centos 配置php centos7 配置php centos7配置php环境
简单谈谈python中的多进程

进程是由系统自己管理的。 1：最基本的写法 from multiprocessing import Pool def f(x): return x*x if __name__ == '__mai...

99+

2022-06-04

进程简单 python
简单谈谈Vue3中的ref和reactive

目录一、是什么？二、先聊reactive三、再聊ref四、ref和reactive定义数组对比五、对比总结总结一、是什么？ ref和reactive是Vue3中用来实现数据响应式的A...

99+

2023-05-16

vue3中ref和reactive区别 vue3 ref和reactive vue3 ref和reactive区别
简单谈谈Java中的栈和堆

人们常说堆栈堆栈，堆和栈是内存中两处不一样的地方，什么样的数据存在栈，又是什么样的数据存在堆中？这里浅谈Java中的栈和堆首先，将结论写在前面，后面再用例子加以验证。 Java的...

99+

2024-04-02
简单谈谈Python中的模块导入

目录模块与包 __import__ 模块缓存 imp 与 importlib 模块惰性导入总结参考资料本文不讨论 Python 的导入机制（底层实现细节），仅讨论模块与包，以及导...

99+

2024-04-02
简单谈谈python中的Queue与多进程

最近接触一个项目，要在多个虚拟机中运行任务，参考别人之前项目的代码，采用了多进程来处理，于是上网查了查python中的多进程一、先说说Queue（队列对象） Queue是python中的标准库，可以直接i...

99+

2022-06-04

进程简单 python
简单谈谈Android中SP与DP的区别

从一开始写Android程序,就被告知这些常识一、dp（或者dip device independent pixels）一种基于屏幕密度的抽象单位。在每英寸160点的显示器...

99+

2022-06-06

dp Android
简单谈谈Python中的几种常见的数据类型

计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据，需要定义不同的数据类型...

99+

2022-06-04

几种数据类型常见
简单谈谈Python中的元祖（Tuple）和字典（Dict）

前言本文记录了对于Python的数据类型中元祖（Tuple）和字典（Dict）的一些认识，以及部分内置方法的介绍。下面话不多说，来看看详细的介绍吧。元祖 Tuple 特点：元祖内的数据不可变一个元素的...

99+

2022-06-04

元祖字典简单
简单谈谈Python中的反转字符串问题

按单词反转字符串是一道很常见的面试题。在Python中实现起来非常简单。 def reverse_string_by_word(s): lst = s.split() # split by ...

99+

2022-06-04

字符串简单 Python
简单谈谈Angular中的独立组件的使用

目录前言如何创建一个独立组件在独立组件中导入已有的模块使用独立组件启动Angular应用为独立组件配置路由配置依赖注入源代码前言 Angular 14一项令人兴奋的特性就是Angul...

99+

2022-11-13

Angular 独立组件 Angular 独立组件的使用方法
浅谈Vue+AntDesignform表单的一些坑

目录设置默认值的坑自定义 v-decorator 组件的坑最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的设置默认值的坑控制台报 Warning: You...

99+

2024-04-02
浅谈一下python线程池简单应用

一、线程池简介传统多线程方案会使用“即时创建，即时销毁”的策略。尽管与创建进程相比，创建线程的时间已经大大的缩短，但是如果提交给线程的任务时执行时间较短，而...

99+

2023-05-16

python线程池 python线程池应用
浅谈Shell中的函数

函数可以让我们将一个复杂功能划分成若干模块，让程序结构更加清晰，代码重复利用率更高。像其他编程语言一样，Shell也支持函数。Shell函数必须先定义后使用。 1.Shell函数的定义格式可以带function关键字...

99+

2022-06-04

shell 函数
浅谈定义一个PHP函数

目录概述函数参数与它们的数据类型函数与它们的返回值可选参数 VS 可空参数概述 <?php function divide($dividend, $divisor)...

99+

2024-04-02
vue中Render函数有什么用

vue中Render函数有什么用，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态...

99+

2024-04-02