百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

使用vite-vue3-ts快速上手做一个todolist

ztj100 2024-11-26 11:16 23 浏览 0 评论

版本信息:

vite 2.4.4

vue 3.0.5

typescript 4.3.5

npm install 安装依赖, npm run dev 启动项目,体验。

成品展示

image-20210830155427560

开发思路

  1. 拆分模块
  2. 设计数据存储方式
  3. 规范数据类型
  4. 详细拆分各模块功能

知识点

setup

Bash
setup() {
  
  const Z:number = ref(0) 
  
  const X = ()=>{
    //method
  }
  
  const function Y() {
    
  }
  
  // 需要在外面继续使用的值/方法,要用 return 返回
  return {
    Z,
    X,
    Y
  }
}

reactive——响应性基础API

Bash
// 这里是一个用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 };

遇到的问题

导入组件问题

  1. 引入 vue 组件时,需要添加后缀名.vue,在 webStorm 修改设置

image-20210827154737368

  1. 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>

遗留问题

  1. 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

相关推荐

人生苦短,我要在VSCode里面用Python

轻沉发自浅度寺量子位出品|公众号QbitAI在程序员圈子里,VisualStudioCode(以下简称VSCode)可以说是目前最火的代码编辑器之一了。它是微软出品的一款可扩展的轻量...

亲测可用:Pycharm2019.3专业版永久激活教程

概述随着2020年的到来,又有一批Pycharm的激活码到期了,各位同仁估计也是在到处搜索激活方案,在这里,笔者为大家收录了一个永久激活的方案,亲测可用,欢迎下载尝试:免责声明本项目只做个人学习研究之...

Python新手入门很简单(python教程入门)

我之前学习python走过很多的歧途,自学永远都是瞎猫碰死耗子一样,毫无头绪。后来心里一直都有一个做头条知识分享的梦,希望自己能够帮助曾经类似自己的人,于是我来了,每天更新5篇Python文章,喜欢的...

Pycharm的设置和基本使用(pycharm运行设置)

这篇文章,主要是针对刚开始学习python语言,不怎么会使用pycharm的童鞋们;我来带领大家详细了解下pycharm页面及常用的一些功能,让大家能通过此篇文章能快速的开始编写python代码。一...

依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!

我真的想知道作者到底咋把PyTorch教程整得这么牛的啊?明明在内容上已经足以成为付费教材了,但作者偏要免费开源给大家学习!...

手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace

这期教向大家介绍仅仅1.3M的轻量级高精度的关键点人脸检测模型DBFace,并手把手教你如何在自己的电脑端进行部署和测试运行,运行时bug解决。01.前言前段时间DBFace人脸检测库横空出世,...

进入Python的世界02外篇-Pycharm配置Pyqt6

为什么这样配置,要开发带UI的python也只能这样了,安装过程如下:一安装工具打开终端:pipinstallPyQt6PyQt6-tools二打开设置并汉化点击plugin,安装汉化插件,...

vs code如何配置使用Anaconda(vscode调用anaconda库)

上一篇文章中(Anaconda使用完全指南),我们能介绍了Anaconda的安装和使用,以及如何在pycharm中配置Anaconda。本篇,将继续介绍在vscode中配置conda...

pycharm中conda解释器无法配置(pycharm配置anaconda解释器)

之前用的好好的pycharm正常配置解释器突然不能用了?可以显示有这个环境然后确认后可以conda正在配置解释器,但是进度条结束后还是不成功!!试过了pycharm重启,pycharm重装,anaco...

Volta:跨平台开发者的福音,统一前端js工具链从未如此简单!

我们都知道现在已经进入了Rust时代,不仅很多终端常用的工具都被rust重写了,而且现在很多前端工具也开始被Rust接手了,这不,现在就出现了一款JS工具管理工具,有了它,你可以管理多版本的js工具,...

开发者的福音,ElectronEgg: 新一代桌面应用开发框架

今天给大家介绍一个开源项目electron-egg。如果你是一个JS的前端开发人员,以前面对这项任务桌面应用开发在时,可能会感到无从下手,甚至觉得这是一项困难的挑战。ElectronEgg的出现,它能...

超强经得起考验的低代码开发平台Frappe

#挑战30天在头条写日记#开始进行管理软件的开发来讲,如果从头做起不是不可以,但选择一款免费的且经得起时间考验的低代码开发平台是非常有必要的,将大幅提升代码的质量、加快开发的效率、以及提高程序的扩展性...

一文带你搞懂Vue3 底层源码(vue3核心源码解析)

作者:妹红大大转发链接:https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...

Windows 11 + WSL2 打造轻量级 Linux 本地开发环境实战教程

一、前言...

基于小程序 DSL(微信、支付宝)的,可扩展的多端研发框架

Mor(发音为/mr/,类似more),是饿了么开发的一款基于小程序DSL的,可扩展的多端研发框架,使用小程序原生DSL构建,使用者只需书写一套(微信或支付宝)小程序,就可以通过Mor...

取消回复欢迎 发表评论: