吴声子夜歌的博客

Vue3框架本身就是基于TypeScript开发的，它对于TypeScript非常友好。而且TypeScript有强大的类型约束能力，可以将项目开发中出现的编译与逻辑错误大幅减少，因此在Vue项目中结合使用TypeScript可以为开发者提供极大的便利。特别是随着项目的业务功能越来越丰富，逐步从小型功能系统发展成中大型项目时，需要进行团队化开发，在Vue项目中使用TypeScript则可以增强开发约束、优化代码结构、强化后期维护。同时因为TypeScript具有类型约束、语法检查、自动友好提示等优点，所以使

这需要从JavaScript说起，因为JavaScript是一门弱类型即时编译型的程序语言，在利用JavaScript进行变量声明时，它没有强制约束要实现的类型，这就使得在利用JavaScript开发项目时，更容易出现类型不对应的情况，从而导致后续操作更容易出现程序错误，并且不容易被发现。如果类似情况出现在团队化开发中，则会引起更多问题，从而影响项目的顺利进展。为了弥补JavaScript弱类型的不足，TypeScript这一强类型的程序语言就诞生了。

Mock 英文解释：模拟的，也就是模拟的数据。工作中等着和后端人员调试接口，但是后端接口写的太 TMD 慢了，实在等不及了。只会写前端，不会写后端。需要后端接口提供测试数据。那有了 Mock 之后，前端人员就有了测试数据，然后就可以愉快地进行开发和测试了。所以，说白了 Mock 就是一个像后端一样可以提供模拟数据的工具。在没有 Mock 之前，大多数人一般都是这样获取模拟数据的：提供一个 json 文件，里面都是死数据{"id": 1002, "name": "李白", "age": 21},

/ 属性名 name // 生成规则 rule // 属性值 value 'name|rule' : value属性名 和 生成规则 之间用竖线 | 分隔。生成规则 是可选的。生成规则 有 7 种格式：生成规则 的 含义 需要依赖 属性值的类型 才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型。占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。@占位符@占位符(参数 [, 参数])用 @ 来标识其后的字符串是 占位符。

返回以下值之’http’、‘ftp’、‘gopher’、‘mailto’、‘mid’、‘cid’、‘news’、‘nntp’、‘prospero’、‘telnet’、‘rlogin’、‘tn3270’、‘wais’。Mock.Random 中的方法与数据模板的 @占位符 一一对应，在需要时还可以为 Mock.Random 扩展方法，然后在数据模板中通过 @扩展方法 引用。当拦截到匹配rurl和rtype的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应返回数据。

因为 Sea.js 社区尚未提供 webpack 插件，所以 Mock.js 暂不完整支持通过 Sea.js 加载。一种变通的方式是，依然通过 Sea.js 配置和加载 Mock.js，然后访问全局变量 Mock。

想要知道什么是接口，我们需要先明确一个专业术语——API（Application Programming Interface，应用程序编程接口）​，它是一些预先定义的函数，目的是提供应用程序与开发人员访问一组例程的能力，而其又无须访问源码，或理解内部工作机制的细节。也就是说，开发人员可以使用API进行编程开发，而又无须访问源码或理解内部工作机制的细节。

fetch()是现代浏览器提供的 用于发起 HTTP 请求的 API，用来替代传统的 XMLHttpRequest。返回值：Promise成功时返回 Response 对象需要手动解析数据（如 .json()）基于 Promise支持 异步 / await更现代、语义更清晰不自带超时、拦截器、自动 JSON。

1. 自定义路由（routes.json）//返回"id": 1,2. 中间件（middleware.js）next();"title": "修改后的标题","author": "张三"//返回"title": "修改后的标题","author": "张三","id": 2。

随着页面逐步增多，功能不断增强，单纯地利用组件切换页面已经无法满足应用程序的开发、扩展和维护需求。如果通过路由来实现，就可以轻松地解决这一难题。通过路由导航，用户就可以管理应用中不断增多的模块内容，并且可以根据业务的需求，在各个不同的模块之间进行自由切换操作。它就像公交、地铁的控制中心，通过该控制中心，可以将班车发送到不同的目的地，如图所示。学习路由首先需要掌握几个核心概念，主要包括静态路由表、分配地址、统一入口、寻找地址及地址过滤。光听这几个名词，读者可能会有些困惑，或者理解不了路由到底是什么，下面我们就

Pinia中的Store具有极高的灵活性，其中存储的状态是响应式的。其中，defineStore函数的第1个参数设置了当前Store的名称，第2个参数是一个配置对象，通过state配置项来定义具体的状态数据，Store中定义的状态数据是具有响应性的，可以直接使用。Vue框架本身就具备状态管理的能力。对于问题2，若不同的组件需要更改为同一状态，最直截了当的做法是将触发权交给上层组件，对于深层嵌套的组件结构而言，这就意味着需要层层向上传递事件，直至顶层统一处理状态更新，这种做法无疑会大幅提升代码维护的难度。

)console.log(to)//将要跳转的路由对象console.log(from)//当前要离开的路由对象return fasle //返回true表示允许此次跳转，返回false表示禁止此次跳转})当注册的beforeEach方法返回的是布尔值时，该布尔值用来决定是否允许此次导航跳转，如以上代码所示，所有的路由跳转都将被禁止。更常见的情况是，在beforeEach方法中返回一个路由配置对象，以此来决定要跳转到的页面。这种方法提供了更高的灵活性。

Axios中提供了许多快捷的请求方法，在11.1节中，我们编写的请求示例代码中使用的就是Axios提供的快捷方法。其中，url参数是要请求的接口；config参数是选填的，用来配置请求的额外选项。// 快捷发起POST请求，data设置请求的参数// 快捷发起DELETE请求// 快捷发起HEAD请求// 快捷发起OPTIONS请求// 快捷发起PUT请求// 快捷发起PATCH请求//获取挂载到应用中心的Axios实例//组件挂载时执行let city = '长春'${

开关是很常见的一种页面元素，有开和关两种状态来支持用户交互。在Element Plus中，使用el-switch来创建开关组件。开关组件的状态只有两种，如果需要使用连续状态的组件，则可以使用el-slider组件，这个组件能够渲染出进度条与滑块，用户可以方便地对进度进行调节。el-switch组件支持开发者对开关颜色、背景颜色等进行定制，常用属性列举如表所示。下面的代码将演示几种基础的标签样式：当页面元素有多种状态时，我们可以尝试使用滑块组件来实现。滑块组件既支持承载连续变化的值，也支持承载离散变化的值。

Element Plus是Vue生态系统中非常流行的UI组件库，它为用户带来了统一的使用体验和明确的控制反馈。对于开发者来说，Element Plus提供了丰富的样式和布局框架，极大地降低了页面开发的成本和复杂性。Element Plus官网Element Plus支持通过CDN直接引入，以便单独使用其提供的组件和样式。这种灵活的使用方式与Vue框架的渐进式风格非常相似。此外，还可以使用npm在Vite创建的模板工程中依赖Element Plus框架进行使用。Element Plus支持使用CDN的方式进行

脚手架这一概念最初源自建筑领域，它指的是为了确保施工过程的顺利进行而搭建的工作平台。在编程领域，项目开发同样需要依赖软件开发平台的支持，因此出现了一些脚手架工具以供开发者使用。Vue是一个渐进式前端Web开发框架，它提供了灵活性，允许开发者仅在项目中的特定页面或仅采用部分功能进行开发。但是，如果我们的目标是构建一个风格统一、具有高度可扩展性的现代化Web单页应用，那么充分利用Vue提供的全套功能进行开发将是非常合适的选择。结合Vue的工具链，我们可以构建一个集开发、编译、调试和发布于一体的集成开发流程。Vi

CSS3自身提供了丰富的动画效果支持。通过实现组件的过渡、渐变、移动和翻转等效果，我们可以为网页增添生动的动画效果。CSS3动画的核心在于@keyframes和transition的定义。@keyframes用于设定动画的行为，例如，在颜色渐变动画中，需要指定动画的起始颜色和结束颜色，浏览器将自动计算并呈现中间状态，以实现动画效果。另一方面，transition的使用更为直观，当组件的CSS属性发生变化时，只需通过transition定义需要过渡的属性，即可轻松创建动画效果。当元素的某个 CSS 属性值发生

setup方法中本身也可以定义组件的生命周期方法，方便将相关的逻辑组合在一起。在setup中，常用的生命周期定义方式如表所示（在组件的原生命周期方法前加on即可）​。组件选项式API声明周期方法setup中的声明周期方法MountedonMountedUpdatedUnmounted。

组件在被创建出来到渲染完成会经历一系列过程。同样，组件的销毁也会经历一系列过程，组件从创建到销毁的这一系列过程被称为组件的生命周期。在Vue中，组件生命周期的节点会被定义为一系列的方法，这些方法被称为生命周期钩子。有了这些生命周期方法，我们可以在合适的时机来完成合适的工作。例如，在组件挂载前准备组件所需要的数据，当组件销毁时清除某些残留数据等。Vue中提供了许多对组件进行配置的高级API接口，包括对应用或组件进行全局配置的API功能接口以及组件内部相关的高级配置项。首先，我们可以通过一个简单的示例来直观地感

template > < div > < h2 > App组件标题 </ h2 > < p > count:{{ count }} </ p > < button @click = " increment " > 增加 </ button > </ div > </ template > < script > import {setup() {return {

Vue3除了沿用传统的选项式API的代码模式，还引入了组合式API，它允许开发人员以更好的方式编写代码。使用组合式API，开发人员可以将逻辑代码块组合在一起，从而编写出可读性高的代码。回顾一下选项式API的代码书写方式，其实选项式API暴露的最主要的一个问题是：操作同一内容目标的代码会被分散在不同的选项中，如data、methods、computed、watch及生命周期钩子函数等。来看下方代码，如果我们想要操作的只有count这一个数据对象，那么选项式API的代码看起来会十分凌乱。来看下方代码，如果我们想

在实际开发过程中，多个网页经常需要共享一些数据。例如，用户登录网站后，网站中的多个页面需要共享登录用户名。实现数据共享最好的方法就是使用Vuex保存数据的状态。Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态。在通常情况下，每个组件拥有自己的状态。有时需要使某个组件的状态变化影响其他组件，使它们也进行相应的修改。这时可以使用Vuex保存需要管理的状态值，状态值一旦被修改，所有引用该值的组件就会自动进行更新。应用Vuex实现状态管理的流程如图所示。

Vue CLI是一个基于Vue.js进行快速开发的完整系统。新版本的Vue CLI的包名由原来的vue-cli改成了@vue/cli。Vue CLI有几个独立的部分，下面分别进行介绍。CLICLI是全局安装的npm包，提供了一些vue命令。通过vuecreate命令可以快速搭建一个新项目，通过vue serve命令可以构建新想法的原型，通过vue ui命令可以使用图形化界面来管理项目。CLI服务。

输入 img→ 生成 <img>（部分编辑器需配置，默认可能生成。输入标签名（如 div）→ 按 Tab或 Enter→ 生成。→ li的父元素 ul的父元素 div的兄弟元素 p。（默认标签为 div，可省略）。

在实际开发过程中，浏览器通常需要和服务器端进行数据交互。而Vue.js并未提供与服务器端通信的接口。从Vue.js 2.0版本之后，官方推荐使用axios来实现Ajax请求。从浏览器中创建XMLHttpRequest。从node.js发出HTTP请求。支持Promise API。拦截请求和响应。转换请求和响应数据。取消请求。自动转换JSON数据。客户端支持防止CSRF/XSRF。

路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的单击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。在使用Vue Router之前需要在页面中进行引入，可以使用CDN方式引入Vue Router。代码如下：如果在项目中使用Vue Router，则可以使用npm方式进行安装。在命令提示符窗口中输入如下命令：1.2、基本用法使用Vue.js创建的应用程序可以由多个组件组成，而VueRouter的作用是将每个路径映射到对应的组件，并通过

对元素和文本的操作，实际上就是对DOM节点的操作。将元素节点添加到当前的DOM树中，或者删除DOM树中的某个元素节点，都会引起浏览器对网页的重新渲染。随着单页应用程序的广泛应用，页面跳转和更新等操作都是在同一个页面中完成的，这样就会更加频繁地操作DOM，对网页的重新渲染就会比较耗时。为了解决DOM渲染效率的问题，Vue.js采用了虚拟DOM机制。虚拟DOM并不是真正意义上的DOM。简单来说，虚拟DOM就是用JavaScript来模拟DOM。

Vue.js内置了一套过渡系统，该系统是Vue.js为DOM动画效果提供的一个特性。它在插入、更新或者移除DOM时可以触发CSS过渡和动画，从而产生过渡效果。Vue.js提供了一个内置的封装组件transition，该组件可以为其中包含的DOM元素实现过渡效果。过渡封装组件的语法格式如下：上述语法中，nameoftransition参数用于自动生成CSS过渡类名。在下列情形中，可以为元素和组件添加过渡效果：下面通过一个示例来说明CSS过渡的基础用法。示例代码如下：上述代码中，通过单击“隐藏”或“显示”按

Vue 3.0中新增了组合API的功能，它是一组附加的、基于函数的API，可以更加灵活地组织组件代码。通过组合API可以使用函数而不是声明选项的方式来编写Vue组件。因此，使用组合API可以将组件代码编写为多个函数，每个函数处理一个特定的功能，不再需要按选项组织代码。组合API可以更好地和TypeScript集成，同时，组合API可以和现有的基于选项的API一起使用。需要注意的是，组合API是在选项(data、methods和computed)之前进行解析，因此组合API无法访问这些选项中定义的属性。

在使用组件之前需要将组件注册到应用中。Vue.js提供了两种注册方式，分别是全局注册和局部注册，下面分别进行介绍。全局注册的组件也叫全局组件。注册一个全局组件的语法格式如下：两个参数的说明如下：在注册组件后，组件以自定义元素的形式进行使用。使用组件的方式如下：例如，注册一个简单的全局组件。代码如下：组件的模板只能有一个根元素。如果模板内容有多个元素，可以将模板的内容包含在一个父元素内。示例代码如下：在组件的选项对象中可以使用data选项定义数据。示例代码如下：上述代码中定义了3个相同的按钮组件。当

1、注册自定义指令1.1、全局自定义指令1.2、局部自定义指令2、钩子函数3、绑定值的类型3.1、绑定数值3.2、绑定字符串3.3、绑定对象字面量Vue.js提供了可以注册自定义指令的方法，通过不同的方法可以注册全局自定义指令和局部自定义指令。下面分别进行介绍。通过应用程序实例的方法可以注册一个全局自定义指令。该方法可以接收两个参数：指令ID和定义对象。指令ID是指令的唯一标识，定义对象是定义的指令的钩子函数。例如，注册一个全局自定义指令，通过该指令实现页面加载后输入框获得焦点时选中输入框的全部内容。

v-model会根据控件类型自动选取正确的方法来更新元素。在表单中，最基本的表单控件类型是文本框。文本框分为单行文本框和多行文本框。下面介绍将文本框中输入单行文本框的作用是输入单行文本。例如，应用v-model指令将单行文本框和定义的数据进行绑定。代码如下：运行程序，结果如图所示。在单行文本框中输入新的内容，下面的内容也会随着变化。上述代码中，应用v-model指令将单行文本框的值和Vue实例中的text属性值进行了绑定。当单行文本框中的内容发生变化时，text属性值也会自动更新。示例：搜索商品信息。定

运行上述代码，当鼠标移入内部的p元素时只会触发该元素的mouseover事件，为元素添加一个蓝色边框，效果如图所示。如果在p元素中未使用.stop修饰符，当鼠标移入内部的p元素时，不但会触发p元素的mouseover事件，还会触发外部的div元素的mouseover事件，因此会显示两个蓝色边框，效果如图所示。上述代码中，当单击按钮时会调用toggle()方法，通过该方法切换flag的值，使按钮文本在“显示”和“隐藏”之间进行切换，下方文本的显示状态也会随之切换，运行结果如图所示。实现动态切换图片的功能。

在Vue.js中，对元素样式的绑定实际上就是对元素的class和style属性进行操作，class属性用于定义元素的类名列表，style属性用于定义元素的内联样式。这种形式是将元素的style属性直接绑定为一个对象，对象的键是CSS属性名，对象的值是data选项中的属性值。在样式绑定中，除了可以绑定元素的class属性，还可以绑定元素的style属性，这种形式是对元素的内联样式进行绑定，绑定的数据可以是对象或数组。在绑定style属性的对象语法中，还可以将元素的style属性绑定为一个返回对象的计算属性。

在模板中绑定表达式的形式使用起来虽然便利，但是它通常被用于简单的运算。如果在模板中放入过多的逻辑就会变得难以维护。例如，在模板中使用表达式，对明日科技企业邮箱地址中的QQ号码进行截取，代码如下：data() {return {data() {return {data() {return {data() {return {</data() {return {</data() {return {data() {return {data() {return {

在应用v-for指令遍历对象时，还可以使用第三个参数为对象提供索引，语法格式为(value，key，index)inobject。其中，object为对象名称，value为对象属性值的别名，key为对象属性名的别名，index为对象的索引。其中，object为对象名称，value为对象属性值的别名，key为对象属性名的别名。当使用非变异方法时，可以用新的数组替换原来的数组。形式的语法，其中，items为数据对象中的数组名称，item为数组元素的别名，通过别名可以获取当前数组遍历的每个元素。

与v-if指令不同，对于使用v-show指令的元素，无论表达式的值为true还是false，该元素始终会被渲染并保留在DOM中。如果要对一组元素进行判断，则需要使用<template>元素作为包装元素，并在该元素上使用v-if，最后的渲染结果里不会包含<template>元素。v-else指令必须紧跟在v-if指令或v-else-if指令的后面，否则v-else指令将不起作用。同样，v-else-if指令也必须紧跟在v-if指令或v-else-if指令的后面。否则，就将DOM元素及其包含的子元素移除。

应用程序实例中几个主要的生命周期钩子函数的说明如下。上述代码中，为<span>标签应用v-bind指令，将该标签的class属性与数据对象中的value属性进行绑定，这样，数据对象中value属性的值将作为<span>标签的class属性值。标签的class属性与数据对象中的value属性进行绑定，并判断title的值，如果title的值为true则使用title类的样式，否则不使用该类。上述代码中，在<h3>标签中应用了v-once指令，这样，当修改数据对象中的text属性值时并不会引起DOM的变化。

如果模块有多个输出值，就不使用export default，不要export default与普通的export同时使用。上面的代码如果使用var替代let，那么console.log那一行就不会报错，而是会输出undefined，因为变量声明会提升到代码块的头部。在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量。简单的、单行的、不会复用的函数，建议采用箭头函数。let表示的变量只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。

其他语言都有这项功能，比如Ruby的require、Python的import，甚至连CSS都有＠import，但是JavaScript没有任何这方面的支持，这对于开发大型的、复杂的项目形成了巨大障碍。系统会去a.js模块对应对象的exports属性取值，可是因为a.js还没有执行完，从exports属性只能取回已经执行的部分，而不是最后的值。CommonJS的做法是，一旦出现某个模块被“循环加载”​，就只输出已经执行的部分，还未执行的部分不会输出。一是，在b.js中a.js没有执行完毕，只执行了第1行。