【Vue】vuejs中单页面组件中render函数不运行？

Z时代
2024-01-10
分类：技术分享

学习研究vuejs的“函数式组件”：
官网链接：函数式组件

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：
<template functional> </template>

但是我用vuejs脚手架搭建的项目，在单页面组件中，render函数压根不运行：

写的测试代码如下：

<template functional>
<div>这是template中写的内容</div>
</template>
<script>
export default {
name: "custome-test-div",
render(createElement,context){
console.log(context);//这里为什么没有运行
return h('div',"这是render函数中写的内容");
}
}
</script>
<style scoped></style>

运行结果为：

【Vue】vuejs中单页面组件中render函数不运行？

我在codesandbox上做了一个在线demo：
https://codesandbox.io/s/yqmm...

回答

楼主，你好！函数式组件，它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。所以它的引入就是为了方便开发者定义很逻辑清晰的组件。vue 单文件里并没有 render 方法，因此不会执行。
你的例子可以改为这样：
1，传送门
2，传送门

下面摘自官网，可以再详细看下，

注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接受 props，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的属性都会被自动解析为 props。

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：

<template functional>
</template>
组件需要的一切都是通过上下文传递，包括：

props：提供所有 prop 的对象
children: VNode 子节点的数组
slots: 返回所有插槽的对象的函数
data：传递给组件的数据对象，并将这个组件作为第二个参数传入 createElement
parent：对父组件的引用
listeners: (2.3.0+) 一个包含了所有在父组件上注册的事件侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。
在添加 functional: true 之后，锚点标题组件的 render 函数之间简单更新增加 context 参数，this.$slots.default 更新为 context.children，之后this.level 更新为 context.props.level。

如有帮助，麻烦点击下采纳，谢谢~

要用render函数，把<template>给去掉

你这个demo写错了呗： template选项的优先级比render选项的优先级高。这两个选项都是告诉vue如何去渲染页面的，同时只能有一个生效。

去掉demo的template代码，才会运行render函数：


<script>
    export default {
        functional:true,
        name: "custome-test-div",
        render(createElement,context){
            console.log(context);//这里为什么没有运行
            return createElement('div',"这是render函数中写的内容");
        }
    }
</script>
<style scoped></style>

render function肯定是要运行的，你确定在cli是这么写的吗，是什么场景会让你用到它，不好意思我没用过知道不太多，(还有为啥你一提问我就会收到邮件让我回答是咋回事，黑人问号脸.jpg)

vue中使用template则没有render方法，react框架中一定要，vue中你可以在methods中定义自己的方法，在生命周期中调用或者在template中调用
使用js创建html则需要render方法

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading :level="2">
        <a href="#">Hello world!</a>
      </tb-heading>
    </div>
  </body>
  <script src="https://segmentfault.com/q/vue.js"></script>
  <script>
    Vue.component('tb-heading', {
      render: function(createElement) {
        return createElement(
          'h' + this.level,    // tag name 标签名称
          this.$slots.default  // 组件的子元素
        )
      },
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    });
    new Vue({
      el: '#container'
    });
  </script></html>