vue functional 组件,导致渲染死循环。

如题,不明白为什么下面的代码会导致循环渲染。

vue version: 2.6.*

代码如下:

<template>
  <div>
    <smart-list :items="items"></smart-list>
  </div>
</template>
<script>
import Vue from 'vue'
const components = (name) => import(`./components/EmptyList.vue`).then(m => m.default || m)
Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent() {
      var items = context.props.items
      if (items.length === 0) return async () => await components('EmptyList')
      if (typeof items[0] === 'object') return async () => await components('TableList')
      if (context.props.isOrdered) return async () => await components('OrderedList')
      return async () => await components('UnorderedList')
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})

export default {
  data: () => ({ items: [] })
}
</script>

./components/EmptyList.vue 里面代码:

<template>
    <div>EmptyList</div>
</template>
阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题