Vue3实战06-CompositionAPI+<script setup>好在哪？
Vue 3 的Composition API +这就把清单功能独立出来，可在任意需要的地方复用。
基于组件去搭建应用，可实现对业务逻辑的复用。如有其他页面也需要用到这功能，直接复用。
然后，就可基于新语法实现清单应用。
把之前的代码移植过来后，使用ref包裹的响应式数据。修改title和todos时，注意修改响应式数据的value属性。
<template>
<input type="text" v-model="title" @keydown.enter="addTodo" />
<ul v-if="todos.length">
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.done" />
{{ todo.title }}
</li>
</ul>
</template>2 计算属性
Composition API语法中，计算属性和生命周期等功能，都可脱离Vue的组件机制单独使用 。
向TodoList.vue加入：
<template>
<input type="text" v-model="title" @keydown.enter="addTodo"/>
<button v-if="active < all" @click="clear">清理</button>
<ul v-if="todos.length">
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.done"/>
{{ todo.title }}
</li>
</ul>
暂无数据
全选<input type="checkbox" v-model="allDone"/>
{{ active }} / {{ all }}
</template>具体的计算属性的逻辑和02讲一样，区别仅在computed用法。
02讲的computed是组件的一个配置项，而这的computed的用法是单独引入使用。
3 Composition API 拆分代码
之前的累加器和清单，虽功能简单，但也属于两个功能模块。如在一个页面有俩功能，就需在data和methods里分别配置。但如此，数据和方法相关的代码会写在一起，在组件代码行数多了后难维护。
所以，要使用Composition API 逻辑拆分代码，把一个功能相关的数据和方法维护在一起。
但所有功能代码都写在一起，也有问题：随功能复杂，script内部代码越来越多。因此，可进步对代码拆分，把功能独立的模块封装成一个独立函数，做到按需拆分。
新建函数 useTodos：
function useTodos() {
let title = ref("");
let todos = ref([{ title: "学习Vue", done: false }]);
function addTodo() {
todos.value.push({
title: title.value,
done: false,
});
title.value = "";
}
function clear() {
todos.value = todos.value.filter((v) => !v.done);
}
let active = computed(() => {
return todos.value.filter((v) => !v.done).length;
});
let all = computed(() => todos.value.length);
let allDone = computed({
get: function () {
return active.value === 0;
},
set: function (value) {
todos.value.forEach((todo) => {
todo.done = value;
});
},
});
return { title, todos, addTodo, clear, active, all, allDone };
}就是把和清单相关的所有数据和方法，都放在函数内部定义并返回，这个函数就可放在任意地方维护。
而组件入口即
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]