使用vite-vue3-ts快速上手做一个todolist
ztj100 2024-11-26 11:16 22 浏览 0 评论
版本信息:
vite 2.4.4
vue 3.0.5
typescript 4.3.5
npm install 安装依赖, npm run dev 启动项目,体验。
成品展示
image-20210830155427560
开发思路
- 拆分模块
- 设计数据存储方式
- 规范数据类型
- 详细拆分各模块功能
知识点
setup
setup() {
const Z:number = ref(0)
const X = ()=>{
//method
}
const function Y() {
}
// 需要在外面继续使用的值/方法,要用 return 返回
return {
Z,
X,
Y
}
}
reactive——响应性基础API
// 这里是一个用state={todosList: Array<ItemData>/ItemData[]} 解构,后面具体内容按照解构的类型
const state = reactive<{ todosList: Array<ItemData> }>({
todosList: []
// todosList: [
// { id: 1, title: "张三", isCompleted: false },
// { id: 2, title: "李四", isCompleted: false },
// { id: 3, title: "瑞斯", isCompleted: false }
// ]
}
);
toRefs
<div class="todosList">
<Header :addPlan="addPlan"></Header>
<List :todosList="todosList"></List>
<Footer :todosList="todosList" :isCompletedAll="isCompletedAll" :clearCompleted="clearCompleted
"></Footer>
</div>
return {
// 将state中的所有属性转换为ref对象 ,用的时候直接使用属性名称即可
...toRefs(state),
// todosList,
};
watch
// (监听的数据源,要执行的方法,配置监听的options)
watch(() => state.todosList, saveTodos, { deep: true });
provide / inject——祖孙传递
// 祖 App.vue
const delPlan = (id: number) => {
// console.log("删除");
state.todosList.splice(id, 1);
};
// 传递出去
provide("delPlan", delPlan);
/*===================================================================*/
// 孙 Item.vue
// 通过 inject 拿到祖父传过来的方法
const delTodo: Function | undefined = inject("delPlan");
const del = (index: number) => {
// console.log(index);
if (window.confirm("确认删除吗?")) {
if (typeof delTodo === "function") delTodo(index);
}
};
computed
<div class="todoItem">
<input class="checkbox" type="checkbox" v-model="isCompleted" />
<!-- <input type="text" :readonly="true" v-model="todoItem.title">-->
<span class="title">{{ todoItem.title }}</span>
<button class="delButton" @click="del(index)">删除</button>
</div>
const isCompleted = computed({
// 通过 computed 的 get 实现 isCompleted 数据的绑定,
get: () => {
return props.todoItem.isCompleted;
},
// 通过 set 创建可写的 ref 对象 实现对状态的更改
set: val => {
if (typeof updateState === "function") updateState(props.todoItem, val);
}
}
);
as——类型强转
props: {
todoItem: {
// 约束类型,使用as强转类型
type: Object as () => ItemData,
required: true
},
index: {
type: Number
}
onMounted——生命周期
// 挂载后读取本地数据,存入todosList
onMounted(() => {
setTimeout(() => {
state.todosList = readTodos();
// console.log(state.todosList);
}, 500);
});
props
在setup内不能使用this,所以传递值通过props来传递,实现双向绑定,和 React 非常相似
export default defineComponent({ name: "Footer", props: { todosList: { // type: Array as ()=>ItemData[], type: Array, required: true }, isCompletedAll: { type: Function, required: true }, clearCompleted: { type: Function, required: true } }, setup(props) { // reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。 const count = computed(() => { return props.todosList.reduce((pre: number, todo: ItemData) => pre + (todo.isCompleted ? 1 : 0), 0); }); // 是否全选操作 const isCheckedAll = computed({ get: () => { // console.log(count) return count.value > 0 && count.value === props.todosList.length; }, set: val => { props.isCompletedAll(val); } }); return { count, isCheckedAll }; } });
interface——规范类型
// 定义接口 ItemData ,约束传入的数据类型export interface ItemData { id: number; title: string; isCompleted: boolean;}
存储数据的工具类
import { ItemData } from "../model/ItemData";function saveTodos(todos: ItemData) { localStorage.setItem("todos_key", JSON.stringify(todos));}function readTodos(): ItemData[] { // console.log(JSON.parse(localStorage.getItem("todos_key") || "[]")) return JSON.parse(localStorage.getItem("todos_key") || "[]");}export { saveTodos, readTodos };
遇到的问题
导入组件问题
- 引入 vue 组件时,需要添加后缀名.vue,在 webStorm 修改设置
image-20210827154737368
- vue3 导入组件依然需要在component中注册
<template>
<div>
todolist
<Header></Header>
<List></List>
<Footer></Footer>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Header from "./components/Header.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";
export default defineComponent({
name: "App",
components: {
Header,
List,
Footer
}
});
</script>
遗留问题
- TS报错
/**
* ! 报错问题
*/
watch(() => state.todosList, saveTodos, { deep: true });
setup(props) {
// reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
const count = computed(() => {
return props.todosList.reduce((pre: number, todo: ItemData) => pre + (todo.isCompleted ? 1 : 0), 0);
});
}
image-20210830154733763
image-20210830154656719
Find me
Gitee:https://gitee.com/heyhaiyon/vite-vue3-ts-todolist.git
微信公众号:heyhaiyang
掘金:heyhaiyang
博客园:heyhaiyang
头条号:heyhaiyang
相关推荐
- Vue3非兼容变更——函数式组件(vue 兼容)
-
在Vue2.X中,函数式组件有两个主要应用场景:作为性能优化,因为它们的初始化速度比有状态组件快得多;返回多个根节点。然而在Vue3.X中,有状态组件的性能已经提高到可以忽略不计的程度。此外,有状态组...
- 利用vue.js进行组件化开发,一学就会(一)
-
组件原理/组成组件(Component)扩展HTML元素,封装可重用的代码,核心目标是为了可重用性高,减少重复性的开发。组件预先定义好行为的ViewModel类。代码按照template\styl...
- Vue3 新趋势:10 个最强 X 操作!(vue.3)
-
Vue3为前端开发带来了诸多革新,它不仅提升了性能,还提供了...
- 总结 Vue3 组件管理 12 种高级写法,灵活使用才能提高效率
-
SFC单文件组件顾名思义,就是一个.vue文件只写一个组件...
- 前端流行框架Vue3教程:17. _组件数据传递
-
_组件数据传递我们之前讲解过了组件之间的数据传递,...
- 前端流行框架Vue3教程:14. 组件传递Props效验
-
组件传递Props效验Vue组件可以更细致地声明对传入的props的校验要求...
- 前端流行框架Vue3教程:25. 组件保持存活
-
25.组件保持存活当使用...
- 5 个被低估的 Vue3 实战技巧,让你的项目性能提升 300%?
-
前端圈最近都在卷性能优化和工程化,你还在用老一套的Vue3开发方法?作为摸爬滚打多年的老前端,今天就把私藏的几个Vue3实战技巧分享出来,帮你在开发效率、代码质量和项目性能上实现弯道超车!一、...
- 绝望!Vue3 组件频繁崩溃?7 个硬核技巧让性能暴涨 400%!
-
前端的兄弟姐妹们五一假期快乐,谁还没在Vue3项目上栽过跟头?满心欢喜写好的组件,一到实际场景就频频崩溃,页面加载慢得像蜗牛,操作卡顿到让人想砸电脑。用户疯狂吐槽,领导脸色难看,自己改代码改到怀疑...
- 前端流行框架Vue3教程:15. 组件事件
-
组件事件在组件的模板表达式中,可以直接使用...
- Vue3,看这篇就够了(vue3 从入门到实战)
-
一、前言最近很多技术网站,讨论的最多的无非就是Vue3了,大多数都是CompositionAPI和基于Proxy的原理分析。但是今天想着跟大家聊聊,Vue3对于一个低代码平台的前端更深层次意味着什么...
- 前端流行框架Vue3教程:24.动态组件
-
24.动态组件有些场景会需要在两个组件间来回切换,比如Tab界面...
- 前端流行框架Vue3教程:12. 组件的注册方式
-
组件的注册方式一个Vue组件在使用前需要先被“注册”,这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册...
- 焦虑!Vue3 组件频繁假死?6 个奇招让页面流畅度狂飙 500%!
-
前端圈的朋友们,谁还没在Vue3项目上踩过性能的坑?满心期待开发出的组件,一到高并发场景就频繁假死,用户反馈页面点不动,产品经理追着问进度,自己调试到心态炸裂!别以为这是个例,不少人在电商大促、数...
- 前端流行框架Vue3教程:26. 异步组件
-
根据上节课的代码,我们在切换到B组件的时候,发现并没有网络请求:异步组件:...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)