ToB企服应用市场:ToB评测及商务社交产业平台
标题:
Vue3实战06-CompositionAPI+<script setup>好在哪?
[打印本页]
作者:
兜兜零元
时间:
2023-9-7 17:29
标题:
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 };
}
复制代码
就是把和清单相关的所有数据和方法,都放在函数内部定义并返回,这个函数就可放在任意地方维护。
而组件入口即
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4