简单谈一谈Vue中render函数
首先我们引入的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函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue项目实例中用query传参如何实现跳转效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,就是在保持代码运行结果不变的前提下,去除无用的代码,本文给大家介绍Vue 3.0中Treeshaking特性是什么,感兴趣的朋友一起看看吧2023-10-10
在Vue3中Pinia是一个状态管理库,它提供了一种简单而强大的方式来管理应用程序的状态,这篇文章主要给大家介绍了关于Vue3 pinia管理数据的3种方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了Vue+canvas实现视频截图功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue单页面如何设置高度100%全屏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue正确使用watch监听属性变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
做公司官网项目的时候遇到的场景,顶部导航栏分类商品跳转到分类详情,然后在分类详情再次点击顶部导航栏里另外的分类商品,跳到同样的页面数据不刷新,下面小编给大家分享解决方式,关于vue跳转不刷新问题感兴趣的朋友一起看看吧2023-09-09
这篇文章主要给大家介绍了利用Vue.js仿微信过渡动画左右切换效果的相关资料，需要用到的技术栈是Vue+Vuex。文中通过示例代码介绍的非常详细，对大家具一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
watch和watchEffect都是监听器,但在写法和使用上有所区别,下面这篇文章主要给大家介绍了关于vue3中watch和watchEffect的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
最新评论