Sheng_Q的博客

本文介绍Vue3的生命周期和钩子函数，鉴于篇幅允许以及防止前端文章过于分散，因此将watch和computed部分之前的学习笔记也整理到本文中。这三部分是三个知识点。watch可以与pinia的$subscribe状态监听进行比较学习。

pina提供了defineStore方法创建store，store作为集中式状态管理的实体，可被任意组件读取/写入数据。定义的store一般放在src/stores目录下。// 定义并暴露一个store// 配置信息})defineStore方法接收两个参数，store的唯一标识符和store的配置对象。其中，store配置对象中可以包含 state函数、actions对象、getters对象。

响应式数据的核心是当数据模型发生变化时，与之相关(使用该数据模型)的视图或组件可以自动更新，以反映最新的数据状态。实现原理是数据劫持、依赖收集和分发更新，数据劫持是一种AOP策略。在vue2中通过Object.defineProperty方法为对象的每个属性设置setter和getter方法，当访问或者修改对象的属性时，进入setter/getter方法，从而实现拦截。getter方法被调用时，可以进行依赖收集，确认属性被哪些组件依赖；

本文介绍如何使用vue3脚手快速搭建一个前端项目，并对生成的项目结构进行简单介绍，然后介绍setup语法糖。前端入门的同学可基于本文内容快速搭建属于自己的项目。vue官网资料显示, vue3开发的项目相对vue2, 具有打包后体积变小，极速启动服务、渲染速度快、内存减少、拥抱ts编程等优点。

Sass作为一种强化CSS的辅助工具，提供了变量、嵌套、混合、继承、导入等功能，是的CSS代码更具可维护性。文件有两种格式：一种以.scss为文件后缀，语法与css相似，使用分号换行，使用大括号包裹样式；一种以.sass为文件后缀使用缩进代替大括号，使用换行代替分号。

本文介绍promise使用方式，以及以Promise为基础的async/await用法和fetch/axios使用方式，主要以案例的方式进行。javascript是单线程执行的，异步编程的本质是事件机制和函数回调。当执行阻塞任务或者进行IO操作时，编程时很容易嵌套多层回调，严重影响可读性和维护性，陷入地狱回调

JS不断发展，浏览器的适配速度没有跟上，引入了一个问题：用高级(ES6+)的JS语法开发的代码，无法在支持低版本(ES5)JS语法的浏览器上运行。babel作为转译工具，可以实现将ES6转译为ES5，为该问题提供了一个解决方案。label常被集成到webpack中进行打包；随着vue3的出现, vite+esbuild的占有率相比webpack+babel更高。

笔者是后端开发😶前端涉猎不深，因此文章重在和实用，对原理和性能不会过多深究。

js中, 一个文件就是一个模块，模块化可以提高代码利用率而减少重复代码，将相同的逻辑维护在一个模块中，分而治之，提高代码的可维护性；另外，模块化的出现可以在工程中引入第三方模块，极大提高开发效率。在模块化出现前，只能通过\标签在html中导入，并根据依赖控制导入顺序。CommonJS出现后，模块化技术不断发展，目前主流的js模块化规范有CommonJS, AMD/CMD以及ES6等模块系统，按照模块化的发展可排序为: CommonJS -> AMD/CMD -> ES6.Co