vue3的组合式API究竟是什么

1 缩略语

rd: 响应式数据，就是vue2中data()函数返回的内容

rf: 处理响应式数据的函数，就是vue2中methods, watch, computed等选项中定义的一堆函数。

 

2 vue2 的问题

假设一个vue组件的代码有好几千行。如下所示：

export default {

  data() {

    return {

      // 一大堆响应式数据 rd

      a, // 处理数据 a 的函数请向下 3000 行

      b, // 处理数据 b 的函数请向下 4000 行

      c, // 处理数据 c 的函数请向下 5000 行

      d, // 处理数据 d 的函数请向下 6000 行

    };

  },

 

  created() {

  }，

  mounted() {

  },

 

  // 第 3000 行

  // methods 选项中定义了一大堆处理响应式数据的函数 rf

  methods: {

    // 处理响应式数据 a 的一堆函数

    // 处理响应式数据 b 的一堆函数

    // 处理响应式数据 c 的一堆函数

    // 处理响应式数据 d 的一堆函数        

  },

 

  // 第 7000 行

  watch: {

   

  },

  // 第 8000 行

  computed: {

 

  },

}

 

vue2的问题：

响应式数据 rd 及其处理函数 rf 被割裂在不同段落中描述，相隔数千行，要相互对照观察非常麻烦。

3 目标

响应式数据 rd 及其处理函数 rf 连在一起描述，便于相互观察和对照。

 

4 解决办法

步骤如下：

S1：声明和定义一个名称为 setup 的函数。

vue 编译系统一看到函数名称为 setup，就知道这个函数集中了响应式数据 rd 及其处理函数 rf，就另眼相待，做专门处理。

 

setup 函数的内容如下：

S2：声明和定义响应式数据 rd

S3：声明和定义响应式数据处理函数 rf

S4：以 rd 和 rf 为属性构造一个Object，简称 ro。

S5：setup 函数返回 ro。

 

示例如下：

export default {

  // 声明和定义响应式数据 rd 及其处理函数 rf 的专用函数

  setup() {

    //---------------------------------------------------------------------  

    // 声明和定义响应式数据 a  

    const a = reactive({

      count: 0,

      // 计算属性

      double: computed(() => a.count * 2),

    });

   

    // 紧接着，声明和定义响应式数据 a 的处理函数

    function f_a() {

      a.count ++;

    }

 

    //---------------------------------------------------------------------

    // 声明和定义响应式数据 b  

    const b = reactive({

      count: 0,

      // 计算属性

      double: computed(() => b.count * 2),

    });

   

    // 紧接着，声明和定义响应式数据 b 的处理函数

    function f_b() {

      b.count ++;

    }

 

    // 以 响应式数据及其处理函数 为 属性 构造一个 Object，作为 setup 函数的返回值

    return {

      a, f_a,

      b, f_b,      

    };

  },

}

 

5 究竟什么是组合式API?

组合式 API 特指 setup 函数。

vue编译系统一看到函数名称为 setup，就知道这个函数集中了响应式数据 rd 及其处理函数 rf，就另眼相待，做专门处理。

“组合”的意思就是响应式数据 rd 及其处理函数 rf 连在一起描述，便于相互观察和对照。