第 28 本《循序渐进 Vue.js 3 前端开发》
简介
本书以一个多年前端“老司机”的视角，循序渐进地介绍当前流行的前端框架Vue.js 3的新特性、各项功能及其在商业开发中的应用。全书共15章，第1~6章介绍Vue.js 3的模板、组件、交互处理等基础知识；第7章介绍Vue.js 3框架的响应式原理及组合式API；第8章介绍使用Vue.js 3框架开发前端动画效果；第9章介绍开发大型项目必备的脚手架工具VueCli和Vite；第10章介绍基于Vue.js 3的UI框架Element Plus；第11~13章分别介绍网络请求框架vue-axios、路由管理框架Vue Router、状态管理框架Vuex；第14章和第15章介绍两个相对完整的项目的开发，即学习网站和电商后台系统。本书试图介绍Vue.js 3全家桶及周边框架和工具的综合应用，旨在使读者通过阅读本书开发自己的应用程序。本书还在各章安排了小型范例和练习题，并提供了教学视频、源代码及PPT课件。
本书既可以入门，也可以进阶，适合Vue.js 3初学者和前端开发人员使用，也可以作为网课、培训机构与大中专院校的教学用书。
阅读笔记
《循序渐进Vue.js 3前端开发实战》 张益珲 49个笔记
◆ 点评
2023/12/6 认为一般 总体感觉一般，讲的很基础，也算比较全面去做一个 Vue 项目了。可惜的是，很多知识点蜻蜓点水，讲的不够全和深入，特别是框架源码部分就只是简单提一下。可能比较适合刚入门或者对官方文档不了解、不理解、不熟悉的人吧。而且很多代码示例没有用 Vue3 组合式 API 来写，还是用 Vue2 的选项式写法，感觉怪怪的。 但也有好的地方，基础掌握不好的还是可以查漏补缺的，可以学习到一些东西，还有每章的知识点问题练习，也是考验对知识点的理解与扩展学习吧
◆ 第1章 从前端基础到Vue.js 3
前端技术的发展经历了静态页面阶段、Ajax阶段、MVC阶段，最终发展到了SPA阶段。
HTML是一种编程语言，是一种描述性的网页编程语言。HTML的全称为Hyper Text Markup Language，我们通常也将其称为超文本标记语言，所谓超文本，是指其除了可以用来描述文本信息外，还可以描述超出基础文本范围的图片、音频、视频等信息
HTML是一种标记语言，其定义了一套标记标签用来描述和控制网站的渲染。
基本的选择器有通用选择器、标签选择器、类选择器和id选择器。
。所谓渐进式，是指其被设计为可以自底向上逐层应用。
◆ 第2章 Vue模板应用
我们使用v-for对对象进行遍历时，指令中的第1个参数为遍历的对象中的属性的值，第2个参数为遍历的对象中的属性的名字，第3个参数为遍历的索引
◆ 第4章 处理用户交互
当我们在页面上触发了一个单击事件时，事件首先会从父组件开始依次传递到子组件，这一过程通常被形象地称为事件捕获，当事件传递到最上层的子组件时，其还会逆向地再进行一轮传递，从子组件依次向下传递，这一过程被称为事件冒泡
◆ 第5章 组件基础
插槽的核心作用是将组件内部的元素抽离到外部进行实现，在进行自定义组件的设计时，良好的插槽逻辑可以使组件的使用更加灵活
插槽中也支持任意的标签内容或其他组件
具名插槽是指为插槽设置一个具体的名称，在使用组件时，可以通过插槽的名称来设置插槽的内容。由于具名插槽可以非常明确地指定插槽内容的位置，因此当一个组件要支持多个插槽时，通常需要使用具名插槽
component是一个特殊的标签，其通过is属性来指定要渲染的组件名称
组件使得HTML元素进行了模板化，使得HTML代码可以拥有更强的复用性。同时，通过外部属性，组件可以根据需求灵活地进行定制，灵活性强。在实际开发中，运用组件可以提高开发效率，同时使得代码更加结构化，更易维护
组件插槽是指在组件内部预定义一些插槽点，在调用组件时，外部可以通过HTML嵌套的方式来设置插槽点的内容。在实际应用中，编写容器类组件离不开组件插槽，其将某些依赖外部的内容交由使用方自己去处理，使得组件的职责更加清晰
◆ 第6章 组件进阶
renderTriggered、renderTracked、beforeUpdate和updated方法。当组件中的HTML元素发生渲染或更新时，会调用这些方法
Props的这种只读性能是Vue单向数据流特性的一种体现。所有的外部属性Props都只允许父组件的数据流动到子组件中，子组件的数据则不允许流向父组件
所谓数据注入，是指父组件可以向其所有子组件提供数据，不论在层级结构上此子组件的层级有多深
当混入对象与组件中定义了相同的选项时，Vue可以非常智能地对这些选项进行合并。不冲突的配置将完整合并，冲突的配置会以组件中自己的配置为准
生命周期函数的这些配置项的混入与属性类的配置项的混入略有不同，不重名的生命周期函数会被完整混入组件，重名的生命周期函数被混入组件时，在函数触发时，会先触发Mixin对象中的实现，再触发组件内部的实现，这类似于面向对象编程中子类对父类方法的覆写
生命周期钩子的本质是方法，只是这些方法由Vue系统自动调用，在组件从创建到销毁的整个过程中，生命周期方法会在其对应的时机被触发。通过实现生命周期方法，我们可以将一些业务逻辑加到组件的挂载、卸载、更新等过程中
可以从常用的配置项说起，如进行全局组件的注册、配置异常与警告的捕获、进行全局自定义指令的注册等
◆ 第7章 Vue响应式编程
注意，watchEffect在setup方法中被调用后，其会和当前组件的生命周期绑定在一起，组件卸载时会自动停止监听，如果需要手动停止监听
watch是一个与watchEffect类似的方法，与watchEffect方法相比，watch方法能够更加精准地监听指定的响应式数据的变化
watch方法比watchEffect方法强大的地方在于，其可以分别获取到变化前的值和变化后的值，十分方便地做某些与值的比较相关的业务逻辑。从写法上来说，watch方法也支持同时监听多个数据源
组合式API的使用能够帮助我们更好地梳理复杂组件的逻辑分布，能够从代码层面上将分离的相关逻辑点进行聚合，更适合进行复杂模块组件的开发
setup方法是组合式API功能的入口方法，如果使用组合式API模式进行组件开发，则逻辑代码都要编写在setup方法中。需要注意，setup方法会在组件创建之前被执行，即对应组件的生命周期方法beforeCreate方法调用之前被执行。由于setup方法特殊的执行时机，除了可以访问组件的传参外部属性props之外，在其内部我们不能使用this来引用组件的其他属性，在setup方法的最后，我们可以将定义的组件所需要的数据、函数等内容暴露给组件的其他选项（比如生命周期函数、业务方法、计算属性等）
去掉了beforeCreate和created两个生命周期方法，这是因为从逻辑上来说，setup方法的执行时机与这两个生命周期方法的执行时机基本是一致的，在setup方法中直接编写逻辑代码即可
◆ 第8章 动画
对于组件的加载或卸载过程，有一系列的生命周期函数会被调用。对于Vue中的转场动画来说，也可以注册一系列的函数来对其过程进行监听
2023/12/3 发表想法 然而大部分人都只关注了第一步，可能因为工期紧张或自身能力有限等问题，没有给用户最优的使用体验，但希望我们可以始于初心，成于匠心，持续不断地做好、完善自己的代码和产品，才能赢得客户的信任和自身能力的提升
对于前端网页开发来说，功能实现仅仅是开发产品的第一步，如何给用户以最优的使用体验才是工程师的核心关注点
对于前端网页开发来说，功能实现仅仅是开发产品的第一步，如何给用户以最优的使用体验才是工程师的核心关注点
◆ 第9章 构建工具Vue CLI的使用
使用命令的方式创建的管理项目与使用图形化页面的方式创建的管理项目的功能是一样的，可以根据自己的习惯来进行选择。总体来说，使用命令的方式更加便捷，而使用图形化页面的方式更加直观
项目工程中有一个名为App.vue的文件，这其实使用了Vue中单文件组件的定义方法，即将组件定义在单独的文件中，以便于开发和维护
图形化工具中不仅可以对项目进行编译、运行和调试，还提供了许多分析报表，比如资源体积、运行速度、依赖项等，非常好用
Vue CLI非常适合大型商业项目的开发，它是构建大型Vue项目不可或缺的工具，Vue CLI主要包括工程脚手架、带热重载模块的开发服务器、插件系统、用户界面等功能。与Vue CLI类似，Vite也是一个提供项目脚手架和开发服务器的构建工具。不同的是，Vite不是基于Webpack的，它有一套自己的开发服务器，并且Vite本身并不像Vue CLI那样功能完善且强大，它只专注于提供基本构建的功能和开发服务器。因此，Vite更加小巧迅捷，其开发服务器比基于Webpack的开发服务器快10倍左右，这对开发者来说太重要了，开发服务器的响应速度会直接影响开发者的编程体验和开发效率。对于非常大型的项目来说，可能会有成千上万个JavaScript模块，这时构建效率的速度差异就会非常明显
Vue CLI是一个基于Vue.js进行快速开发的完整系统，其提供了一套可交互式的项目脚手架，无论是项目开发过程中的环境配置、插件和依赖管理，还是工程的构建打包与部署，使用Vue CLI工具都可以极大地简化开发者需要做的工作。Vue CLI也提供了一套完全图形化的管理工具，开发者使用起来更加方便直观。另外，其还配套了一个vue-cli-service服务，可以帮助开发者方便地在开发环境中运行工程
◆ 第12章 Vue路由管理
router-link组件是一个自定义的链接组件，它比常规的a标签要强大很多，其允许在不重新加载页面的情况下更改页面的URL。router-view用来渲染与当前URL对应的组件，我们可以将其放在任何位置，例如带顶部导航栏的应用，其页面主体内容部分就可以放置router-view组件，通过导航栏上按钮的切换来替换内容组件
beforeRouteUpdate函数在路由将要更新时会调用，其会传入两个参数，to是更新后的路由对象，from是更新前的路由对象
路由视图命名是指对router-view组件进行命名，router-view组件用来定义路由组件的出口，前面我们讲过，路由支持嵌套，router-view可以进行嵌套。通过嵌套，允许我们的Vue应用中出现多个router-view组件。但是对于有些场景，可能需要同级地展示多个路由视图，例如顶部导航区和主内容区两部分都需要使用路由组件，这时候就需要同级地使用router-view组件，要定义同级的每个router-view要展示的组件，可以对其进行命名
别名提供了一种路由路径映射的方式，也就是说我们可以自由地将组件映射到一个任意的路径上，而不用受到嵌套结构的限制
需要注意，别名和重定向并不完全一样，别名不会改变用户在浏览器中输入的路径本身，对于多级嵌套的路由来说，可以使用别名在路径上对其进行简化。如果原路由有参数配置，一定要注意别名也需要对应地包含这些参数。在为路由配置别名时，alias属性可以直接设置为别名字符串，也可以设置为数组同时配置一组别名
使用属性的方式进行参数传递
props还有一种更强大的使用方式，可以直接将其设置为一个函数，函数中返回要传递到组件的外部属性对象，这种方式动态性很好
更多时候，我们会在beforeEach方法中返回一个路由配置对象来决定要跳转的页面，这种方式更加灵活，例如可以将登录态校验的逻辑放在全局的前置守卫中处理，非常方便
与定义全局前置守卫类似，也可以注册全局的导航后置回调。与前置守卫不同的是，后置回调不会改变导航本身，但是其对页面的分析和监控十分有用
beforeRouteEnter是组件的导航前置守卫，在通过路由将要切换到当前组件时被调用，在这个函数中，可以做拦截操作，也可以做重定向操作，需要注意此方法只有在第一次切换此组件时会被调用，路由参数的变化不会重复调用此方法。beforeRouteUpdate方法在当前路由发生变化时会被调用，例如路由参数的变化等都可以在此方法中捕获到。beforeRouteLeave方法会在将要离开当前页面时被调用。还有一点需要特别注意，在beforeRouteEnter方法中不能使用this来获取当前组件实例，因为在导航守卫确认通过前，新的组件还没有被创建。如果一定要在导航被确认时使用当前组件实例处理一些逻辑，可以通过next参数注册回调方法
下面来总结Vue Router导航跳转的全过程。第1步：导航被触发，可以通过router-link组件触发，也可以通过$router.push或直接改变URL触发。第2步：在将要失活的组件中调用beforeRouteLeave守卫函数。第3步：调用全局注册的beforeEach守卫。第4步：如果当前使用的组件没有变化，调用组件内的beforeRouteUpdate守卫。第5步：调用在定义路由时配置的beforeEnter守卫函数。第6步：解析异步路由组件。第7步：在被激活的组件中调用beforeRouteEnter守卫。第8步：导航被确认。第9步：调用全局注册的afterEach守卫。第10步：触发DOM更新，页面进行更新。第11步：调用组件的beforeRouteEnter函数汇总next参数注册的回调函数。
◆ 第13章 Vue状态管理
来思考下面两种状况：（1）有多个组件依赖于同一个状态。（2）多个组件都可能触发动作变更一个状态
Action与Mutation类似，不同的是，Action并不会直接修改状态数据，而是对Mutation进行包装，通过提交Mutation来实现状态的改变。这样在Action定义的方法中，允许我们包含任意的一步操作
Vuex的状态管理功能主要解决了Vue组件间的通信问题，让跨层级共享数据或平级组件共享数据变得非常容易