vue(31)vue中CompositionAPI组合API的使用

前面介绍的vue的组件书写中，必须要在data，methons，或者computed等模块中写上对应的内容，vue3提供了一种更加自由的写法，不用非得定义这些各个模块并只能将需要的内容写入固定的模块中，这种写法叫组合API。

如下Home.vue：

<template>

  <div class="home">

    count:{{ data.count }}

    <br />

    double:{{ data.double }}

    <br>

    <button @click="add()">增加</button>

  </div>

</template>

<script>

//引入vue组合api需要的模块

import { reactive, computed } from "vue";

export default {

  setup() {

    const data = reactive({

      //等价于原来的data中的数据

      count: 0,

      //等价于原来的计算属性

      double: computed(() => {

        return data.count * 2;

      }),

    });

    //等价于原来methos中的方法

    function add() {

      data.count++;

    }

    //这里必须要将上面的定义返回

    return { data, add };

  },

};

</script>