详解在vue项目中使用render函数

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。

基础

如何使用:

render: function (createElement) {
	// createElement函数返回结果是VNode
	return createElement(
		tag, // 标签名称
		data, // 传递数据
		children // 子节点数组
	)
}

详解

render函数涉及到vue里的一个核心思想:虚拟DOM

Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码:

return createElement('h1', this.blogTitle)

createElement 到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

使用场景

我们看vue官方给出的一个例子,不要细究使用方法,注意Vue.component

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

可以看出render函数通过Vue.component最终输出了一个vue组件,为什么要讲这个?

通篇读完vue render函数的文档后,产生了一个非常大的疑问,这个render函数的使用场景是什么?如果说是render函数返回的是虚拟节点,那这个节点应该放在哪呢?这个方法是会包含节点的描述信息,可是生成后的节点放在哪呢?我们肯定是要将渲染出来的节点插入原有的dom结构里,我怎么才知道放在那个节点前?哪个节点后?哪个节点里面?

官方例子确实是创建了一个component,可是我总不能在项目中也Vue.component一个组件吧,有的人肯定想到项目中用的就是组件,怎么到你这又有问题了?往下看。

带着这个问题我找到了一篇文章:

render方法的实质就是生成template模板;

render函数生成的内容相当于template的内容,所以使用render函数时,在.vue文件中需要先把template标签去掉。只保留逻辑层。

意思很明白,在脚手架生成的项目中,.vue文件是通过template渲染的虚拟dom,template底层也是使用的render函数。一个组件最终的模板只能有一个,所以如果在项目中(.vue文件)使用render函数,就要去掉template标签;并且你只能作为组件来使用,不可能整个页面都用render函数js手写页面吧~

如此,便解决了我莫大的疑问。

使用方法

src\components\render\heading.vue

<script>
export default {
  props: ["level", "title"],
  // heading组件
  // <heading :level="1" :title="title" icon="cart">{{title}}</heading>
  // <h2 title=""></h2>
  render(h) {
    console.log("this.$slots.default :>> ", this.$slots.default);
    return h(
      "h" + this.level, // 参数1,tagname
      { attrs: { title: this.title } }, // 参数2:{。。。}
      //this.$slots.default 为默认插槽
      //也可以定义具名插槽 this.$slots.名称 | 使用 v-slot:名称 插入
      this.$slots.default // 参数3,子节点VNode数组
    );
  },
};
</script>

<style lang="scss" scoped>
</style>

src\view\test\test2.vue

<template>
  <div>
    <h2>render函数</h2>
    <heading :title="title" :level="level">
      {{ title }}
    </heading>
  </div>
</template>

<script>
import Heading from "../../components/render/heading.vue";
export default {
  components: { Heading },
  data() {
    return {
      title: "这是由render函数渲染的标签。",
      level: "1",
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

效果:
在这里插入图片描述

参考

  • https://forum.vuejs.org/t/render-new-vue/16084/5
  • https://www.jb51.net/article/148712.htm

结尾

我是圆圆,如果我的文章对你的学习成长有所帮助,欢迎 点 赞 👍 支持,您的 点 赞 👍 支持是我进行创作和分享的动力!

如果有问题可以留言评论或者私信我,我都会一一解答~笔芯🤞

  • 53
    点赞
  • 134
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
Vuerender 函数Vue 组件渲染的核心,通过 render 函数可以实现更加灵活的组件编写方式。下面是关于 Vue render 函数的详细介绍: 1. 概念定义: Vuerender 函数是一个纯 JavaScript 函数,它接收一个 createElement 函数作为参数,用于生成虚拟 DOM,最终将组件渲染成 HTML。在 Vue 组件,可以使用 render 函数来代替 template,这样可以更加灵活地渲染组件。 2. createElement 函数: createElement 函数Vue 的一个工厂函数,用于快速创建虚拟 DOM 元素。createElement 函数接收三个参数,第一个参数是标签名或组件,第二个参数是属性对象,第三个参数是子节点。 使用 createElement 函数可以快速创建虚拟 DOM 元素,例如: ```javascript // 创建一个 div 元素 createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) ``` 3. Vue 组件的 render 函数Vue 组件的 render 函数接收一个 createElement 函数作为参数,通过该函数创建虚拟 DOM 元素。在 render 函数,通过编写 JavaScript 代码来生成 DOM 元素,可以使用条件判断、循环语句等,从而实现更加灵活的组件渲染。 例如,下面是一个简单的 render 函数: ```javascript render (createElement) { return createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) } ``` 4. render 函数与 template 的对比: 相对于 template,render 函数的优点在于:可以使用 JavaScript 代码生成 DOM 元素,可以进行条件判断、循环语句等;可以实现更加灵活的组件开发;可以更好地控制组件的渲染流程。 相对于 template,render 函数的缺点在于:需要熟悉 JavaScript 语法和 createElement 函数;在实现复杂组件时,需要编写更多的代码。 5. render 函数和 JSX: JSX 是 Facebook 出品的一种语法扩展,可以在 JavaScript 编写类似 HTML 的语言。与 render 函数类似,JSX 也是将组件编写成 JavaScript 代码的方式。 Vue 也支持 JSX 语法,Vue 的 JSX 实现是通过 Babel 插件实现的。使用 JSX 可以更加直观地编写组件,但需要熟悉 JSX 语法和相关工具的使用。 6. 总结: render 函数Vue 组件的核心,它通过 createElement 函数创建虚拟 DOM 元素,最终将组件渲染成 HTML。相对于 template,render 函数可以实现更加灵活的组件开发,但需要熟悉 JavaScript 语法和 createElement 函数。同时,Vue 也支持 JSX 语法,可以更加直观地编写组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值