Vue3实战06-CompositionAPI+<script setup>好在哪？

Vue 3 的Composition API +

复制代码

这就把清单功能独立出来，可在任意需要的地方复用。
基于组件去搭建应用，可实现对业务逻辑的复用。如有其他页面也需要用到这功能，直接复用。
然后，就可基于新语法实现清单应用。
把之前的代码移植过来后，使用ref包裹的响应式数据。修改title和todos时，注意修改响应式数据的value属性。

1. <template>
2.   
3.     <input type="text" v-model="title" @keydown.enter="addTodo" />
4.     <ul v-if="todos.length">
5.       <li v-for="todo in todos">
6.         <input type="checkbox" v-model="todo.done" />
7.          {{ todo.title }}
8.       </li>
9.     </ul>
10.   
11. </template>

复制代码

2 计算属性

Composition API语法中，计算属性和生命周期等功能，都可脱离Vue的组件机制单独使用 。
向TodoList.vue加入：

1. <template>
2.   
3.     <input type="text" v-model="title" @keydown.enter="addTodo"/>
4.     <button v-if="active < all" @click="clear">清理</button>
5.     <ul v-if="todos.length">
6.       <li v-for="todo in todos">
7.         <input type="checkbox" v-model="todo.done"/>
8.          {{ todo.title }}
9.       </li>
10.     </ul>
11.     暂无数据
12.    
13.       全选<input type="checkbox" v-model="allDone"/>
14.        {{ active }} / {{ all }}
15.    
16.   
17. </template>

复制代码

具体的计算属性的逻辑和02讲一样，区别仅在computed用法。
02讲的computed是组件的一个配置项，而这的computed的用法是单独引入使用。
3 Composition API 拆分代码

之前的累加器和清单，虽功能简单，但也属于两个功能模块。如在一个页面有俩功能，就需在data和methods里分别配置。但如此，数据和方法相关的代码会写在一起，在组件代码行数多了后难维护。
所以，要使用Composition API 逻辑拆分代码，把一个功能相关的数据和方法维护在一起。
但所有功能代码都写在一起，也有问题：随功能复杂，script内部代码越来越多。因此，可进步对代码拆分，把功能独立的模块封装成一个独立函数，做到按需拆分。
新建函数 useTodos：

1. function useTodos() {
2.   let title = ref("");
3.   let todos = ref([{ title: "学习Vue", done: false }]);
4.   function addTodo() {
5.     todos.value.push({
6.       title: title.value,
7.       done: false,
8.     });
9.     title.value = "";
10.   }
11.   function clear() {
12.     todos.value = todos.value.filter((v) => !v.done);
13.   }
14.   let active = computed(() => {
15.     return todos.value.filter((v) => !v.done).length;
16.   });
17.   let all = computed(() => todos.value.length);
18.   let allDone = computed({
19.     get: function () {
20.       return active.value === 0;
21.     },
22.     set: function (value) {
23.       todos.value.forEach((todo) => {
24.         todo.done = value;
25.       });
26.     },
27.   });
28.   return { title, todos, addTodo, clear, active, all, allDone };
29. }

复制代码

就是把和清单相关的所有数据和方法，都放在函数内部定义并返回，这个函数就可放在任意地方维护。
而组件入口即

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！