初识vue渲染函数-rander

最新推荐文章于 2024-08-15 16:42:09 发布

paidaboluo

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量398

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/paidaboluo/article/details/126470835

版权

Vue渲染函数提供了一种使用JavaScript编程方式创建VNode的途径，适用于复杂逻辑。它接受createElement参数，并可以传递props和方法。相比模板，渲染函数更接近编译器，允许直接操作DOM。例子中展示了如何创建自定义组件，如anchored-heading和title-head，以及如何绑定事件。在某些场景下，当需要更高灵活性时，使用render函数会更为合适。

摘要由CSDN通过智能技术生成

render官方介绍

类型：(createElement: () => VNode) => VNode
详细：

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

通过简单的描述可以看到渲染函数的特殊性，首先来了解一下vue渲染

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

如果是比较简单的逻辑，使用template和el比较好，而使用自定义render函数相当于人已经将逻辑翻译给程序，能够胜任复杂的逻辑，灵活性高，但对于用户的理解相对差点。

可以看到我们直接跳过了 el 和 template ，可以直接拿到 render函数，相当于我们一直使用的是封装好的组件，而现在我们可以直接改写源码

语法

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement (   createElement参数   )
    },
    props: {}，
    methods： {}
})

参数

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中 attribute 对应的数据对象。可选。
  {
    // (样式，绑定事件，等等行内选项)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

现在就可以理解vue官方给的例子了

Vue.component('title-head', {
  render: function (createElement) {
      return createElement(
          'h' + this.level,   // tag name 标签名称
          this.$slots.default // 插槽
      )
  },
  props: {
      level: {
          type: Number,  // 参数
          required: true
      }
  }
})

在页面中使用

  <div class="box">
    <title-head :level="1">123123123123123123</title-head>
  </div>

绑定简单的点击事件

Vue.component('title-head', {
  render: function(createElement) {
    return createElement(
      'h' + this.level, // tagname标签名称
      {
        on: {
          click: this.log
        }
      },
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  methods: {
    log() {
      console.log(this.level)
    }
  },
})