这篇文章将为大家详细讲解有关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如何实现无状态的组件用函数式组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
