VUE如何实现无状态的组件用函数式组件

这篇文章将为大家详细讲解有关VUE如何实现无状态的组件用函数式组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

无状态的组件用函数式组件

对于一些纯展示，没有响应式数据，没有状态管理，也不用生命周期钩子函数的组件，我们就可以设置成函数式组件，提高渲染性能，因为会把它当成一个函数来处理，所以开销很低

原理是在 patch 过程中对于函数式组件的 render 生成的虚拟 DOM，不会有递归子组件初始化的过程，所以渲染开销会低很多

它可以接受 props，但是由于不会创建实例，所以内部不能使用 this.xx 获取组件属性，写法如下

<template functional>
 <div>
   <div class="content">{{ value }}</div>
 </div>
</template>
<script>
export default {
 props: ['value']
}
</script>

// 或者
Vue.component('my-component', {
 functional: true, // 表示该组件为函数式组件
 props: { ... }, // 可选
 // 第二个参数为上下文，没有 this
 render: function (createElement, context) {
   // ...
}
})

关于“VUE如何实现无状态的组件用函数式组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。