vue(31)vue中CompositionAPI组合API的使用
时间：2021-07-05 18:02:28
收藏：0
阅读：0
前面介绍的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>
评论（0）