一. 设计原则1. 一致 Consistency与现实生活一致： 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致： 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2. 反馈 Feedback控制反馈： 通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈： 操作后，通过页面元素的变化清晰地展现当前状态。 3. 效率 Efficiency简化流程： 设计简洁直观的操作流程； 清晰明确： 语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别： 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 4. 可控 Controllability用户决策： 根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策； 结果可控： 用户可以自由的进行操作，包括撤销、回退和终止当前操作等。 二. 导航导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。 一般导航会有「侧栏导航」和「顶部导航」2 种类型。 1. 选择合适的导航选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会 ...
课外开发
未读响应结构一个请求的响应包含以下信息。 1234567891011121314151617181920212223{ // `data` 由服务器提供的响应 data: {}, // `status` 来自服务器响应的 HTTP 状态码 status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息 statusText: 'OK', // `headers` 是服务器响应头 // 所有的 header 名称都是小写，而且可以使用方括号语法访问 // 例如: `response.headers['content-type']` headers: {}, // `config` 是 `axios` 请求的配置信息 config: {}, // `request` 是生成此响应的请求 // 在node.js中它是最后一个ClientRequest实例 (in redirects)， // 在浏览器中则是 XMLHttpRe ...
课外开发
未读一. Axios 是什么?Axios 是一个基于 promise 网络请求库，作用于 node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 文档：https://github.com/axios/axios 二. 特性 从浏览器创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 超时处理 查询参数序列化支持嵌套项处理 自动将请求体序列化为： JSON (application/json) Multipart / FormData (multipart/form-data) URL encoded form (application/x-www-form-urlencoded) 将 HTML Form 转换成 JSON 进行请求 自动转换 JSON 数据 获取浏览 ...
大学生涯
未读7. 其它 API7.1.【shallowRef 与 shallowReactive 】shallowRef 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。 用法： 1let myVar = shallowRef(initialValue); 特点：只跟踪引用值的变化，不关心值内部的属性变化。 shallowReactive 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的 用法： 1const myObj = shallowReactive({ ... }); 特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。 总结 通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。 7.2.【readonly 与 shallowReadonly】readonly 作用：用于创建一个对象的深只读 ...
大学生涯
未读8. Vue3 新组件8.1. 【Teleport】 什么是 Teleport？—— Teleport 是一种能够将我们的组件 html 结构移动到指定位置的技术。 1234567<teleport to="body"> <div class="modal" v-show="isShow"> <h2>我是一个弹窗</h2> <p>我是弹窗中的一些内容</p> <button @click="isShow = false">关闭弹窗</button> </div></teleport> 8.2. 【Suspense】 等待异步组件时渲染一些额外内容，让应用有更好的用户体验 使用步骤： 异步引入组件 使用 Suspense包裹组件，并配置好 default 与 fallback 12import { defineAsyncComponent, Susp ...
大学生涯
未读6. 组件通信Vue3组件通信和 Vue2的区别： 移出事件总线，使用 mitt代替。 vuex换成了 pinia。 把 .sync优化到了 v-model里面了。 把 $listeners所有的东西，合并到 $attrs中了。 $children被砍掉了。 常见搭配形式： 6.1. 【props】概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。 若 父传子：属性值是非函数。 若 子传父：属性值是函数。 父组件： 1234567891011121314151617181920<template> <div class="father"> <h3>父组件，</h3> <h4>我的车：{{ car }}</h4> <h4>儿子给的玩具：{{ toy }}</h4> <Child :car="car" :getTo ...
大学生涯
未读5. pinia5.1【准备一个效果】 5.2【搭建 pinia 环境】第一步：npm install pinia 第二步：操作 src/main.ts 1234567891011121314import { createApp } from "vue";import App from "./App.vue";/* 引入createPinia，用于创建pinia */import { createPinia } from "pinia";/* 创建pinia */const pinia = createPinia();const app = createApp(App);/* 使用插件 */ {}app.use(pinia);app.mount("#app"); 此时开发者工具中已经有了 pinia选项 5.3【存储+读取数据】 Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。 它有三个概念：state、getter ...
大学生涯
未读4. 路由4.1. 【对路由的理解】 4.2. 【基本切换效果】 Vue3中要使用 vue-router的最新版本，目前是 4版本。 路由配置文件代码如下： 12345678910111213141516171819import { createRouter, createWebHistory } from "vue-router";import Home from "@/pages/Home.vue";import News from "@/pages/News.vue";import About from "@/pages/About.vue";const router = createRouter({ history: createWebHistory(), routes: [ { path: "/home", component: Home, }, { path: & ...
大学生涯
未读Vue3 + TS + 组合式 API + setup 语法糖 核心: ref、reactive、cumputed、watch、生命周期 常用: hooks、自定义 ref、路由、pinia、mitt 面试: 组件通信、响应式相关 API 1. Vue3 简介 2020 年 9 月 18 日，Vue.js发布版 3.0版本，代号：One Piece（n 经历了：4800+次提交、40+个 RFC、600+次 PR、300+贡献者 官方发版地址：Release v3.0.0 One Piece · vuejs/core 截止 2023 年 10 月，最新的公开版本为：3.3.4 1.1. 【性能的提升】 打包大小减少 41%。 初次渲染快 55%, 更新渲染快 133%。 内存减少 54%。 1.2.【 源码的升级】 使用 Proxy代替 defineProperty实现响应式。 重写虚拟 DOM的实现和 Tree-Shaking。 1.3. 【拥抱 TypeScript】 Vue3可以更好的支持 TypeScript。 1.4. 【新的特性】 Composition ...
大学生涯
未读async 与 await1. async async 作为一个关键字放到声明函数前面，表示该函数为一个异步任务，不会阻塞后面函数的执行 async 函数里如果有异步过程会等待，但async 函数本身会马上返回，不会阻塞当前线程。可以简单认为 async 函数工作在主线程，同步执行，不会阻塞界面渲染；async 函数内部由 await 修饰的异步过程，工作在相应的协程上，会阻塞等待异步任务的完成再返回 async 函数返回类型为 Promise 对象async 函数会返回一个 promise，并且 Promise 对象的状态值是 resolved（成功的）如果没有在 async 函数中写 return，那么 Promise 对象 resolve 的值就是是 undefined如果写了 return，那么 return 的值就会作为成功的时候传入的值 这是和普通函数本质上不同的地方，也是使用时重点注意的地方： 1. return new Promise()，这个符合 async 函数本意 2. return data 这是同步函数的写法，特别注意这其实就相当于 Promise.reso ...
