函数式组件个人理解

函数式组件个人理解

特征

1. 不包含状态（没有响应式数据）

   · 状态

   状态 = 变量/数据，指vue应用中某个模块的当前状态，比如侧边导航slide隐藏显示

   // 只用在当前组件上
   data(){
   	return{
   		slideShow:true
       }
   }
   // 用在多个组件上
   const state={
       slideShow:true
   }
   

2. 没有实例 (没有 this 上下文)

   · 组件有实例的表现

   <div id="app">
   	<test></test>
   </div>
   
   <script>
       Vue.component("test", {
       	render: (h) => {
       		h("div");
       	},
       	data() {
       		return {
       			name: "zs", // 有响应式数据
       		};
       	},
       	mounted() {
       		console.log(this.name);  // 可以用this获取到当前组件下的状态（数据）或者方法
       	},
       });
       new Vue({
       	el: "#app",
       });
   </script>
   

基本用法

<div id="app">
      <test name="zs"></test>
</div>

<script>
      Vue.component("test", {
        functional: true,
        // Props 是可选的
        props: {
          name:{
            type:String,
            required:true
          }
        },
        // 为了弥补缺少的实例
        // 提供第二个参数作为上下文
        render: function(createElement, context) {
          return createElement(
            'div',
            context.props.name
          )
          
        },
      });
      new Vue({
        el: "#app",
      });
</script>

1. functional: true
2. 可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop
3. 组件需要的一切都是通过 context 参数传递（详情查看文档）

为什么用函数式组件？

首先函数式组件没有状态，正常响应式数据在组件初始化的时候会在vue底层进行一系列的初始化操作，而函数式组件免去了这初始化操作，性能也就加强了