vue函数式组件

Posted 2021-11-22 wuxianqiang

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

<template functional>
  <div class="cell">
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>

<script>
export default {
  props: [‘value‘]
}
</script>

我们标记组件为 functional，这意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。

提示：函数式组件比普通组件性能更好，缺点是定义的数据没有响应式。