目录
网站
168张图，万字长文，手把手教你开发vue后台管理系统！-腾讯云开发者社区-腾讯云
上面的教程vue和element不是最新版本仅作参考
https://github.com/lin-xin/vue-manage-system/tree/masterhttps://toscode.mulanos.cn/tanzo/vue-manage-system
GitHub - Linliang-121/Flask-VUE-Yolov5: 基于Flask开发后端、在WEB端部署基于YOLOv5的PCB电路板缺陷模型
Vue.js - 渐进式 JavaScript 框架 | Vue.js
安装与配置
Node.js
下载直接安装，自动包含 npm。
Node.js — Run JavaScript Everywhere
检查是否安装成功
node -v
node
nmp -vvue
按官网来就行了快速上手 | Vue.js
ElementPlus
tips:在项目根目录下安装
引入
快速开始 | Element Plus 在main.ts中添加
FontAwesome字体图标库
1.安装 font-awesome，项目根目录下
npm i font-awesome -S
2.配置 font-awesome
在 main.js 配置 font-awesome
import 'font-awesome/css/font-awesome.min.css'ECharts数据可视化组件
在项目中引入 ECharts - 入门篇 - 使用手册 - Apache ECharts
引入
// 全局引入 echarts
import * as echarts from 'echarts'
// 创建Vue应用实例
const app = createApp(App)
// 将 echarts 挂载到 Vue 上
app.config.globalProperties.$echarts = echarts
//vue2写法：Vue.prototype.$echarts = echarts
//tips：在 Vue 2 中通常是 Vue，在 Vue 3 中通常是通过 createApp 创建的应用实例
Vue 3 的变化： 在 Vue 3 中，Vue.prototype 的修改方式有所变化。如果您直接在 app.prototype 上添加属性，可能会遇到问题，因为 createApp 返回的对象并不直接暴露原型链进行修改。在 Vue 3 中，使用 app.config.globalProperties 来添加全局属性
安装配置 Axios
项目根目录下
npm i axios -S引入
main.ts中
// 引入 axios
import axios from 'axios'
// 将 axios 挂载到 Vue 上
app.config.globalProperties.$axios = axios
// 设置接口请求的前缀地址
axios.defaults.baseURL = '/zhifou-study'
// 全局设置token
axios.interceptors.request.use(function (config) {
let token = sessionStorage.getItem('token')
if (token) {
config.headers['token'] = token
}
return config
})配置路由守卫
index.ts中
/**
* 定义全局前置守卫以实现路由权限控制
* @param router Vue Router实例
*/
router.beforeEach((to, from, next) => {
// 检查目标路由是否需要身份验证
const requiresAuth = to.meta.requiresAuth;
// 放行登录页面，无需身份验证
if (to.path === '/login') {
return next()
}
// 检查是否有token，无则重定向到登录页
const tokenStr = sessionStorage.getItem('token')
if (!tokenStr) {
return next('/login')
} else {
next()
}
});配置登录路由
index.ts
// 创建路由器实例
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // 使用基于Web的历史模式，并基于BASE_URL配置路径
routes: [
{
path: '/', // 定义根路径
name: 'home', // 路径名称
component: HomeView // 关联的组件
},
{
path: '/about', // 定义关于页面的路径
name: 'about',
// 在路由级别实现代码分割
// 这将为这个路由生成一个独立的代码块（About.[hash].js）
// 当路由被访问时，该代码块会被延迟加载
component: () => import('../views/AboutView.vue')
},
//添加如下
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue')
}
]
})vscode
Visual Studio Code - Code Editing. Redefined
名词解释：
vue
前端 JavaScript 框架简介 | Vue.js
Vue 的两个核心功能：
-
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
-
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
优势
-
渐进式框架： Vue 提供了逐步采用的能力，开发者可以根据项目需求选择性地使用其核心库、路由库（Vue Router）、状态管理库（Vuex）等组件，无需从一开始就引入复杂的体系结构。这种渐进式特性使得 Vue 可以轻松集成到现有项目中，或是从小型项目逐渐扩展到大型单页应用。
-
组件化开发： Vue 鼓励使用组件化的方式来组织代码，每个组件都是独立、可复用的视图单元，具有自己的视图模板、逻辑和样式。组件间通过 props 接口进行数据传递，通过事件进行通信，这种模式有利于提高代码复用性、降低复杂度，并促进团队协作。
-
高效的虚拟 DOM： Vue 采用了虚拟 DOM 技术，能够智能地计算出最小化的 DOM 更新操作，从而实现高效渲染和更新。当数据发生变化时，Vue 只会对实际需要更新的部分进行重新渲染，避免了不必要的 DOM 操作，提升了应用性能。
-
响应式系统： Vue 实现了一套响应式的数据绑定系统。通过
v-model、指令（如v-bind、v-on）和计算属性等特性，Vue 能够自动追踪数据变化，并同步更新视图。这种声明式的数据绑定方式极大地简化了视图与数据之间的交互逻辑。 -
强大的生态系统：
- 插件与库：如 Axios（HTTP 请求库）、Vue-i18n（国际化）、Vue-Router（路由管理）、Vuex（状态管理）等，提供了开箱即用的解决方案。
- UI 组件库：如 Element UI、Vuetify、Quasar、Ant Design Vue 等，提供了一系列风格统一、功能完备的 UI 组件，加速界面开发。
- 开发工具：如 Vue DevTools 浏览器插件，提供了强大的调试和性能分析工具。
- 构建工具与服务：如 Vue CLI（命令行工具）、Vite（现代构建工具）、Netlify、Vercel 等，简化项目初始化、开发、部署流程。
-
灵活性与兼容性： Vue 可以与其他库或现有项目很好地集成，既可以作为小型库用于简单的交互，也可以驱动复杂的单页应用。Vue 对于老旧浏览器也有一定的兼容性支持，同时可以通过 Vue CLI 配置 Babel 和 Polyfill 以适应更多浏览器环境。
路由：
Vue 中的路由指的是对应用程序内部不同页面或视图之间的导航和管理机制。在 Vue.js 构建的单页应用（SPA, Single-Page Application）中，路由扮演着至关重要的角色，主要体现在以下几个方面：
-
URL 与视图映射： 路由的核心功能是根据用户在浏览器中输入的 URL 或者点击页面上的链接时触发的 URL 变化，动态地呈现相应的视图（Vue 组件）。这意味着每个不同的 URL 路径（如
/home、/about、/products/:id等）都对应着一个特定的 Vue 组件。当 URL 发生变化时，Vue Router 能够解析这个 URL，然后加载并渲染相应的组件，而无需整个页面进行重新加载。 -
组件切换： 路由器负责在不同 Vue 组件之间进行无缝切换。这种切换通常是平滑的、无刷新的，提升了用户体验。通过定义路由规则，开发者可以指定哪些组件应该在哪个 URL 下显示，以及如何响应路由变化（例如使用
<router-view>标签作为占位符，动态插入匹配到的组件）。 -
导航管理： Vue Router 提供了丰富的导航功能，包括但不限于：
- 编程式导航：通过
router.push()、router.replace()、router.go()等方法，可以在代码中控制路由的跳转，实现页面间的逻辑导航。 - 路由守卫（Route Guards）：允许在路由切换的生命周期钩子中添加验证逻辑，如权限检查、数据预取、保留滚动位置等操作。常见的守卫类型有
beforeEach、beforeRouteEnter、beforeRouteLeave等。 - 动态路由与参数：支持在路径中使用动态 segments（如
:id），用于捕获 URL 中的特定部分作为参数传递给目标组件。组件可以通过this.$route.params访问这些参数。 - 嵌套路由：支持定义多层嵌套的路由结构，以模拟应用中的层级关系，如侧边栏导航、多级菜单等。嵌套路由对应的组件结构通常也具有嵌套关系。
- 编程式导航：通过
-
路由状态与路由对象： Vue Router 创建了一个全局的
router对象，它包含了当前路由的状态信息（如router.currentRoute），以及各种导航方法和辅助工具。开发人员可以访问这个对象来获取当前激活的路由、查询参数、hash 等信息，也可以订阅路由变化事件以作出相应反应。 -
与 Vue.js 深度集成： Vue Router 作为官方推荐的路由解决方案，与 Vue.js 的核心库设计风格一致，易于集成和使用。它支持 Vue 的组件系统、依赖注入、过渡动画等特性，使得路由管理能够无缝融入 Vue 应用的整体开发流程中。
综上所述，Vue 里的路由是一种用于管理单页应用内部页面流转、视图切换以及与 URL 交互的机制，它通过 Vue Router 这个官方库实现，极大地简化了复杂前端应用的架构设计与开发工作。
DOM
Vue 主要通过虚拟 DOM（Virtual DOM）技术来实现高效、灵活的视图更新，这里的“DOM”指代的是 Document Object Model（文档对象模型）。DOM 是一种标准的编程接口，用于表示和操作 HTML、XML 或 SVG 文档。在 Vue.js 应用程序的上下文中，DOM 主要涉及以下几个方面：
-
HTML 页面结构： DOM 表示的是浏览器加载 HTML 页面后，在内存中构建起来的树状结构，这个结构反映了页面的元素、属性、文本节点等所有内容。每个节点在 DOM 中都是一个对象，可以通过 JavaScript 来访问和操作。
-
数据绑定与更新： Vue.js 使用声明式的数据绑定语法（如
v-bind、v-if、v-for等指令）来关联数据与 DOM 元素。当 Vue.js 的响应式数据发生变化时，它会触发虚拟 DOM 的重新计算和对比，进而对实际 DOM 进行最小化更新，确保用户界面与数据状态保持一致。尽管开发者通常不直接操作 DOM，但这些更新最终会反映在真实的 DOM 结构上，影响用户可见的页面内容。 -
事件处理： Vue.js 提供了
v-on指令（简写为@）来处理 DOM 事件，如用户点击、表单提交、键盘输入等。当这些事件发生时，Vue 会在组件实例中调用相应的事件处理函数，开发者可以在这些函数中编写业务逻辑，对数据进行修改或触发其他操作。 -
组件化视图： 在 Vue.js 中，组件是构成用户界面的基本单元，每个组件都有自己的模板（template），即一段描述组件结构的 HTML 片段。当组件被渲染时，Vue 会将这些模板转换成实际的 DOM 元素插入到页面中。组件内部可以包含子组件，形成嵌套的 DOM 结构。通过操作组件状态或传递 props，可以间接地影响组件及其子组件对应的 DOM 内容。
-
与原生 DOM API 的交互： 尽管 Vue.js 鼓励通过数据驱动的方式来更新视图，但在某些特定场景下，开发者可能需要直接操作 DOM。Vue 提供了
ref属性来获取对 DOM 元素或子组件实例的直接引用，从而能够使用原生 DOM API（如querySelector、addEventListener、style属性等）进行精细控制。不过，这种做法应谨慎使用，以免破坏 Vue 的响应式机制和组件化原则。
npm
npm（Node Package Manager）与 Node.js 一同安装，并用于管理项目中的依赖包。
1. 依赖管理： 包管理器，用于安装、更新、卸载和管理项目中使用的各种软件包。在 Vue.js 项目中，npm 用于安装 Vue.js 本身、Vue CLI（用于快速构建项目）、Vue Router（路由管理库）、Vuex（状态管理库）、以及其他第三方库（如 Axios 用于 HTTP 请求、Element UI 或 Vuetify 作为 UI 组件库等）。
2. 依赖版本控制： npm 允许在 package.json 文件中精确指定依赖包的版本范围，确保项目使用兼容的库版本，并通过 package-lock.json 或 yarn.lock 文件锁定安装的具体版本，保证项目在不同机器或环境下的一致性。
3. 自动化任务： npm 支持定义和执行脚本命令，如 npm run serve、npm run build 等，这些命令通常封装了诸如启动开发服务器、构建生产环境代码、运行测试等自动化任务，简化了开发流程。
4. 社区生态： npm 拥有庞大的开源软件包生态系统，开发者可以便捷地搜索、发现并引入他人开发的高质量模块，极大地丰富了 Vue.js 项目的功能，同时降低了重复造轮子的成本。
用法
创建新项目： 使用 Vue CLI 创建新项目时，npm 自动被用来安装所需的依赖包。例如：
vue create my-project添加依赖： 在项目中需要引入新的库时，使用 npm install 命令：
npm install <library-name>管理依赖： 更新所有依赖到最新版本：
npm update移除不再需要的依赖：
npm uninstall <library-name>运行项目脚本： 执行 package.json中定义的脚本命令，如启动开发服务器：
npm run serve编译生产环境代码：
npm run build状态管理（Vuex/Pinia）
【一文搞定Pinia】超详细的Pinia教程，比Vuex香太多了！-CSDN博客
Vue.js 中的状态管理主要用于解决以下问题：
-
数据共享： 在大型或复杂的单页应用程序（SPA）中，往往存在多个组件需要访问或操作相同的共享数据。状态管理为这些组件提供了一个中心化的场所来存放和管理这些共享状态，确保所有相关组件都能访问到最新的、一致的数据，避免了数据孤岛和重复状态的产生。
-
组件间通信： 组件之间的交互和通信是 Vue 应用中的常见需求。状态管理库（如 Vuex 或 Pinia）提供了统一的接口和模式，简化了不同层级、不同关系的组件之间传递状态和触发行为的过程，消除了直接依赖事件总线、props drilling（通过层层传递props来共享数据）等传统方法带来的复杂性和局限性。
-
状态变化的跟踪与同步： 状态管理库能够追踪状态的变化，并通过响应式系统自动更新依赖这些状态的组件视图。当某个组件触发了状态的更改，所有依赖该状态的其他组件会立即接收到更新通知，无需手动管理这些更新逻辑，确保了视图与数据的一致性。
-
事务性操作与中间件： 对于涉及多个状态变更的复杂业务逻辑，状态管理库可能支持事务性操作，确保一系列状态变更要么全部成功，要么全部回滚，保持数据完整性。某些库还支持中间件机制，可以在状态变更前后插入额外的处理逻辑，如日志记录、权限校验、副作用触发等。
-
可预测性与调试便利性： 集中式状态管理强制执行单一数据源原则，所有的状态变更必须通过定义明确的“mutations”或“actions”进行。这种约束提高了代码的可预测性，使得在调试时更容易追溯状态变化的历史和原因。配合相应的开发者工具，可以实时查看状态树、监控状态变化和操作日志，极大地提升了开发和调试效率。
-
架构清晰与代码组织： 状态管理将数据层与视图层分离，有助于形成清晰的分层架构。状态、获取器（getters）、动作（actions）等概念的明确划分，使得代码职责更加明确，有利于团队协作和代码维护。通过将与状态相关的逻辑集中在一起，项目可以更好地遵循关注点分离（Separation of Concerns）原则。
综上所述，Vue.js 中的状态管理主要目的是实现数据的集中存储、高效共享、有序更新以及对复杂交互场景的支持，从而提升代码的可维护性、可测试性和应用的整体性能。常见的状态管理库如 Vuex 和 Pinia 为实现这些目标提供了具体的工具和框架。
项目目录/文件作用
-
package.json：项目元数据与依赖管理文件，包括项目名称、版本、作者、脚本、依赖项和开发依赖项等。 -
package-lock.json/yarn.lock：锁定文件，记录实际安装的依赖版本，确保项目环境一致性。 -
node_modules：存放项目依赖的 Node.js 模块。
public 目录
-
index.html：项目的 HTML 入口文件，通常仅包含基本的 HTML 结构和用于挂载 Vue 应用的<div id="app"></div>。 -
favicon.ico/robots.txt（可选）：网站图标和搜索引擎爬虫规则文件。
src 目录
assets
- 存放静态资源，如图片、字体、音频、视频等。这些资源可通过相对路径在 Vue 组件中引用，并在构建过程中经过处理（如压缩、转码）和复制到输出目录。
components
- 存放可复用的 Vue 单文件组件（
.vue文件），每个组件包含模板、脚本、样式三部分。
layouts
- （可选）存放应用级别的布局组件，如通用头部、侧边栏、页脚等，用于多个页面共享相同布局结构。
pages 或 views
- 存放应用的视图（页面）组件，每个组件对应一个具体的路由。例如，
HomeView.vue和AboutView.vue分别对应主页和关于页面。
router
index.js或router.ts：路由配置文件，定义应用的路由规则（路径、名称、组件、嵌套路由、重定向等），并使用createRouter创建路由器实例。
store
- （在使用 Vuex 时）存放状态管理相关的文件，包括状态（store）、mutations、actions、getters 的定义。
styles
- 存放全局或共享的 CSS/Sass/Less 样式文件。
types 或 shims-vue.d.ts
- （在使用 TypeScript 时）存放类型声明文件，可能包含 Vue、Vuex、Vue Router 等第三方库的类型定义。
main.js 或 main.ts
- 应用主入口文件，负责初始化 Vue 实例、注册全局组件、插件、挂载根组件到 DOM 上，并通过
createApp、use、mount等方法设置应用的基本配置和启动流程。
app.vue
- 应用的根组件，通常包含全局布局和路由视图切换逻辑（如
<router-view>组件）。
tests 目录
- 存放单元测试、集成测试等各类测试文件及相关配置。
babel.config.js / tsconfig.json
- Babel 和 TypeScript 的编译器配置文件，定义代码转换规则、模块解析等设置。
jest.config.js / cypress.config.js（可选）
- 测试框架配置文件，如 Jest 或 Cypress。
vue.config.js（可选）
- Vue CLI 项目自定义配置文件，用于扩展或覆盖默认的 webpack 配置、代理设置、输出目录等。
postcss.config.js（可选）
- PostCSS 插件配置文件，用于定义 CSS 处理规则。
lint-staged.config.js / husky.config.js（可选）
- 预提交代码检查和 Git 钩子配置文件，确保代码质量和遵循规范。
env.d.ts（可选）
- TypeScript 环境变量类型声明文件，提供
import.meta.env中变量的类型提示。
.ts结尾文件说明与作用
在 Vue.js 开发项目中，以 .ts 结尾的文件通常是指 TypeScript 文件。TypeScript 是一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的超集，增加了静态类型检查、接口、枚举、泛型等高级特性和严格的类型系统。
在 Vue.js 项目中，.ts 文件通常用于以下几个方面：
-
组件定义： Vue.js 项目可以使用 TypeScript 来编写单文件组件（Single File Components, SFC）。这些组件文件通常以
.vue扩展名表示，内部包含<template>、<script>和<style>三个部分。其中<script>部分可以指定lang="ts"来表明其内容是 TypeScript 代码。而在某些情况下，尤其是为了更好地利用编辑器的类型检查和智能提示，开发者可能会选择将组件的逻辑部分（即原本<script>内的代码）提取到单独的.ts文件中，这样可以更专注于逻辑的编写和类型定义。 -
服务、工具函数、混入（Mixins）： 项目中可能会包含一些独立的 TypeScript 文件，用来定义通用的服务类、工具函数、混入（mixins）等。这些文件通常包含纯 TypeScript 代码，提供了项目的各种辅助功能或可复用逻辑，比如网络请求服务、数据处理函数、通用组件行为等。
-
状态管理（Vuex/Pinia）： 当使用 Vuex 或 Pinia 进行状态管理时，对应的 store 定义文件也常常采用
.ts扩展名。这些文件内会定义状态（state）、获取器（getters）、动作（actions）、以及可能的模拟能力（mutations in Vuex），利用 TypeScript 的类型系统来确保状态操作的安全性和一致性。 -
路由配置： 如果项目使用 Vue Router 并且启用了 TypeScript 支持，路由配置文件（如
router.ts）也会使用 TypeScript 来编写。这样可以为路由定义、路由组件、路由参数、导航守卫等提供类型支持。 -
项目配置与脚本： 除此之外，Vue.js 项目的配置文件（如
vue.config.ts）、构建脚本（如使用webpack或vite时的配置文件）、自定义的 CLI 脚本等也可能使用 TypeScript 编写，以利用其类型系统的优点来防止配置错误和提高开发体验。
总之，在 Vue.js 项目中，.ts 文件通常包含用 TypeScript 语言编写的各类代码，包括但不限于组件逻辑、服务、工具函数、状态管理、路由配置等，旨在利用 TypeScript 的类型系统增强项目的健壮性、可维护性和开发效率。
几个关键文件代码注释
main.ts或main.js
// 导入主样式文件
import './assets/main.css'
// 从'vue'导入创建应用的方法；
//这里{}指的是解构导入，import 语句允许直接导入整个模块（如 import Vue from 'vue'），
//也可以选择性地导入模块中特定的成员。使用大括号 {} 实现的就是后者，称为“解构导入”。
import { createApp } from 'vue'
// 从'pinia'导入创建状态管理的方法
import { createPinia } from 'pinia'
// 导入应用的根组件
import App from './App.vue'
// 导入路由配置
import router from './router'
// 创建Vue应用实例
const app = createApp(App)
// 使用Pinia进行状态管理
app.use(createPinia())
// 使用路由配置
app.use(router)
// 将应用实例挂载到HTML页面中id为'app'的元素上
app.mount('#app')App.vue
<script setup lang="ts">
/**
* 导入Vue Router的相关组件
* RouterLink: 用于创建导航链接
* RouterView: 用于渲染路由对应的组件
*/
import { RouterLink, RouterView } from 'vue-router'
/**
* 导入自定义的HelloWorld组件
* @msg 组件接收一个消息参数，用于展示欢迎信息
*/
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<!-- 页面头部，包含网站标识和导航菜单 -->
<header>
<!-- Vue的logo图片 -->
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<!-- 页面主要内容区域的容器 -->
<div class="wrapper">
<!-- 显示HelloWorld组件，传递自定义欢迎消息 -->
<HelloWorld msg="You did it!" />
<!-- 导航菜单，包含主页和关于页面的链接 -->
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<!-- 路由视图，用于渲染对应路由的组件 -->
<RouterView />
</template>router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 创建路由器实例
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // 使用基于Web的历史模式，并基于BASE_URL配置路径
routes: [
{
path: '/', // 定义根路径
name: 'home', // 路径名称
component: HomeView // 关联的组件
},
{
path: '/about', // 定义关于页面的路径
name: 'about',
// 在路由级别实现代码分割
// 这将为这个路由生成一个独立的代码块（About.[hash].js）
// 当路由被访问时，该代码块会被延迟加载
component: () => import('../views/AboutView.vue')
}
]
})
export default router // 导出路由器实例供应用使用函数
转自：
1.生命周期
Vue3 的生命周期函数主要有 7 个：
1.setup：开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。
2.onBeforeMount：DOM 挂载之前。
3.onMounted：DOM 挂载之后。
4.onBeforeUpdate：组件更新之前。
5.onUpdated：组件更新之后。
6.onBeforeUnmount：组件卸载之前。
7.onUnmounted：组件卸载之后。
在实际开发中经常用到的就是 onMounted，比如进入列表页面获取列表数据。
2.setup函数
setup 函数是 vue3 中很重要的组件，相当于生命的起点。Vue3 中其他组件或者函数必须被包含在 setup 函数中。
而且定义的变量或者函数、必须要通过 return暴露出来，不然在 template 中没法使用。
从这里你也看出痛点了：如果定义的变量和函数太多，return 起来比较麻烦。
<script >
setup () {
const message = '我是知否君'
const num = ref(10)
return { num,message }
}
</script>
所以 Vue3.2 之后做了改变：
只用在 script 标签中添加 setup，不用写 setup 函数，不用 return，我们也能在 template 中使用。
3.ref函数
ref 函数用来将简单数据类型定义为响应式数据。
注意：vue 中的响应式指的是你在 script 标签中修改了变量的值，template 中该变量的值会立即改变，对应的页面上变量的值也会立即改变。
修改值: 变量.value
// ref函数，将简单数据类型定义为响应式数据，修改值的时候，需要.value
let poet = ref("李白");
const changePoet = () => {
poet.value = "杜甫";
};4.toRef函数
toRef 函数可以将对象中某个属性定义为单独的响应式数据
let user = reactive({
name: "张无忌",
age: 12,
});
// toRef 函数可以将对象中某个属性定义为单独的响应式数据
const name = toRef(user, "name");
const changeName = () => {
name.value = "赵敏";
};5.toRefs 函数
toRefs函数用来将对象中所有属性变为响应式数据
let user = reactive({
name: "张无忌",
age: 12,
});
// toRefs函数用来将对象中所有属性变为响应式数据
const refUser = toRefs(user);
const changeRefAge = () => {
refUser.age.value = 18;
};
6.reactive函数
reactive 是一个函数，它可以将复杂数据类型变成响应式数据。
// reactive是一个函数，它可以将复杂数据类型变成响应式数据。
let user = reactive({
name: "知否君",
age: 23,
});
7.computed
Vue 3 中的 computed 是用于定义计算属性的一种机制，它允许您基于组件状态或其他响应式依赖项创建衍生值。计算属性在 Vue 中具有以下特点：
- 自动缓存：当依赖的响应式数据未发生变化时，计算属性会返回缓存的结果，避免不必要的重复计算，提高性能。
- 响应式：当依赖的响应式数据发生变化时，计算属性会自动重新计算，并触发关联视图的更新。
基本用法
<script>
import { ref, computed } from 'vue';
export default {
setup() {
// 定义响应式状态
const state = ref('initial value');
// 定义计算属性
const derivedValue = computed(() => {
// 这里可以访问 `state.value` 并基于其进行计算
return state.value.toUpperCase();
});
// 返回暴露给模板的对象
return {
state,
derivedValue,
};
},
};
</script>
<template>
<div>
<input v-model="state" placeholder="输入文字">
<p>原始值: {{ state }}</p>
<p>转换后的值: {{ derivedValue }}</p>
</div>
</template>
在这个例子中：
ref用于创建一个响应式变量state。computed接收一个回调函数，该函数内定义了如何基于响应式状态计算衍生值。这里将state.value转换为大写。- 计算属性
derivedValue会在state变化时自动更新，且结果会被缓存，除非state值改变，否则多次访问derivedValue不会导致重复计算。
带有 setter 的计算属性
除了只读的计算属性外，还可以定义带有 getter 和 setter 的计算属性，允许外部直接修改计算结果，同时内部会根据需要更新依赖的响应式状态：
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const baseNumber = ref(1);
const squared = computed({
get: () => baseNumber.value * baseNumber.value,
set: (value) => {
// 将平方根赋值给 baseNumber，保持与计算属性结果的一致性
baseNumber.value = Math.sqrt(value);
},
});
return {
baseNumber,
squared,
};
},
};
</script>
<template>
<div>
<input v-model.number="baseNumber" type="number">
<p>Base Number: {{ baseNumber }}</p>
<p>Squared: {{ squared }}</p>
</div>
</template>在这个例子中：
squared计算属性不仅有一个getter函数，用于计算平方值，还有一个setter函数，当外部试图直接设置squared的值时，它会接收这个值并将其平方根赋给baseNumber。
上述示例代码修改为使用 <script lang="ts" setup> 语法糖的版本：
<script lang="ts" setup>
import { ref, computed } from 'vue';
// 定义响应式状态
const state = ref<string>('initial value');
// 定义计算属性
const derivedValue = computed(() => state.value.toUpperCase());
// 带有 setter 的计算属性
const baseNumber = ref<number>(1);
const squared = computed({
get(): number {
return baseNumber.value * baseNumber.value;
},
set(value: number): void {
baseNumber.value = Math.sqrt(value);
},
});
</script>
<template>
<div>
<input v-model="state" placeholder="输入文字">
<p>原始值: {{ state }}</p>
<p>转换后的值: {{ derivedValue }}</p>
<input v-model.number="baseNumber" type="number">
<p>Base Number: {{ baseNumber }}</p>
<p>Squared: {{ squared }}</p>
</div>
</template>主要改动如下：
- 在
<script>标签中添加了lang="ts" setup属性，启用 TypeScript 支持并使用<script setup>语法糖。 - 对
state和baseNumber使用 TypeScript 类型注解，分别指定它们为字符串类型和数字类型。 - 在计算属性
derivedValue和squared的get方法以及squared的set方法上添加了类型注解，明确返回值类型和参数类型。
8.watch
watch 函数是监听器，用来监听变量的变化。
// watch 监听
watch(user, () => {
console.log("user改变了");
});
watch(
() => user.age,
() => {
console.log("age改变了");
}
);语法糖
<script lang="ts" setup>
<script>标签里有两种写法，使用setup语法糖的写法如下。
<script lang="ts" setup> 标签作为 Vue 3 中使用 TypeScript 和 Composition API 的一种简化写法，它可以包含以下常见结构和元素：
tips:两种方法不能混用
<script lang="ts" setup>
// 导入必要的依赖
import { ref, computed, watchEffect, onMounted, useFetch } from 'vue';
// 定义接收的 props 类型
interface Props {
// 声明具体的 prop 类型和名称
prop1: string;
prop2: number;
// ...
}
// 使用 defineProps 进行 props 的类型声明与访问
const props = defineProps<Props>();
// 声明响应式状态变量
const count = ref(0);
const message = ref<string>('Initial Message');
// 定义计算属性
const formattedCount = computed(() => `Count: ${count.value}`);
// 监听外部状态或数据变化
watchEffect(() => {
console.log('Count changed:', count.value);
});
// 生命周期钩子函数
onMounted(() => {
console.log('Component mounted');
});
// 数据获取或异步操作
const { data, error, isFetching } = useFetch('https://api.example.com/data');
// 定义组件内部方法
function increment() {
count.value++;
}
// 如果有需要暴露给模板使用的函数或变量，直接在此处定义即可
// 没有 export default，因为 setup 语法糖会自动处理暴露
// ... 其他组件逻辑
</script> 总结来说，<script lang="ts" setup> 标签内的内容通常包括：
-
导入依赖：从
vue或其他库中导入所需的 Composition API 函数，如ref,computed,watchEffect, 生命周期钩子函数等。 -
Props类型定义与声明：使用 TypeScript 接口（如
Props）来定义组件接收的props的类型结构，然后使用defineProps<Props>()来声明并访问这些props。 -
响应式状态：使用
ref或reactive创建响应式状态变量。 -
计算属性：使用
computed创建基于响应式状态的衍生值。 -
副作用管理：使用
watchEffect、watch或生命周期钩子函数（如onMounted、onUpdated等）来处理副作用、监听数据变化或执行特定阶段的逻辑。 -
数据获取与异步操作：使用
useFetch、useAsync或自定义的async函数进行数据获取或异步任务。 -
组件内部方法：定义将在模板中调用的方法。
请注意，由于 script setup 语法糖的作用，上述代码中的变量和方法无需显式导出，它们会被自动暴露给对应的模板。这种写法极大地简化了 Composition API 的使用，使得代码更为紧凑且易于理解。
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
