vue的函数式组件functional

vue的函数式组件没怎么使用，所以可能不是很了解，所以，就花点时间大致了解下，算是对此有大概印象，其实它就是个函数而已，感觉与react的无状态组件有点像，特此做记录下。

首先vue的函数式组件functional主要有以下特点：

• 无状态（没有相应式数据）
• 无实例（没有this上下文,无法像传统组件一样通过this获取属性）
• 没有任何生命周期
• 轻量,渲染性能高，渲染开销底,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)
• 在template标签里标明functional
• 只接受props值
• 不需要script标签

下面是关于此的简单demo，感觉动手操作下，会理解比较深。

Test.vue，

<script>
var vueCompt = {
  //传递home的data值到组件vueCompt内部
  props: ["data"],
  //渲染函数
  render: function (createElement) {
    return createElement("div", [
      createElement("div", "这个是vue图片"),
      createElement("img", {
        attrs: {
          src: this.data.url,
          height: 200,
          width: 200,
        },
      }),
    ]);
  },
};

var reactCompt = {
  props: ["data"],
  render: function (createElement) {
    return createElement("div", [
      createElement("div", "react用于构建用户界面的 JavaScript 库"),
      createElement("img", {
        attrs: {
          src: this.data.url,
          height: 200,
          width: 200,
        },
      }),
      createElement("div", this.data.text),
    ]);
  },
};

export default {
  /*
  添加 functional: true 之后就是函数式组件functional
  */
  functional: true,
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  /**
   * 函数式组件没有创建组件实例，所有传统的通过this来调用的属性，在这里都需要通过context来调用
   */
  render: function (createElement, context) {
    function getComponent() {
      var data = context.props.data;
      //判断是哪一种类型的组件
      switch (data.type) {
        case "vue":
          return vueCompt;
        case "react":
          return reactCompt;
        default:
          console.log("data 类型不合法：" + data.type);
      }
    }
    return createElement(
      getComponent(),
      {
        props: {
          data: context.props.data,
        },
      },
      context.children
    );
  },
};
</script>

Home.vue

<template>
  <div class="home">
    <h2>vue的functional小栗子</h2>
    <test :data="data"></test>
    <button @click="change('react')">react文字</button>
    <button @click="change('vue')">vue图</button>
  </div>
</template>

<script>
import Test from "@/views/Test.vue";
export default {
  name: "Home",
  data() {
    return {
      data: {},
    };
  },
  components: {
    Test,
  },
  methods: {
    change: function (type) {
      switch (type) {
        case "vue":
          this.data = {
            type: "vue",
            url: "https://cn.vuejs.org/images/logo.png",
            list: [],
          };
          break;
        case "react":
          this.data = {
            type: "react",
            url:
              "https://cdn.jsdelivr.net/gh/reactnativecn/react-native-website@gh-pages/img/header_logo.svg",
            text:
              "React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件",
          };
          break;
      }
    },
  },
  created: function () {
    this.change("react");
  },
};
</script>

vue的函数式组件functional参考：

官方functional参考

Vue 函数式组件原理和使用详解

Vue 函数式组件 functional

说说 Vue.js 中的 functional 函数化组件

推荐在线MP4转gif工具