qq_37550440的博客

可以看到保存的时候ref这行被提到了最前面的一行 要求内置库放在组件的前面称为auto fix，数组new arry改成了字面量，这就是我们配置的规范airbnb规范： https://github.com/airbnb/javascript?tab=readme-ov-file#arrow-functionsantfu 组合规范：https://github.com/antfu/eslint-config/tree/feat/support-eslint-9NVM全称node.js version man

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。现在你可以直接使用class="m-1"来设置边距。但正如你所见，用这种方法的情况下，你不能使用除了 1 到 10 之外的边距，而且，即使你只使用了其中一条 CSS 规则，但还是要为其余几条规则的文件体积买单。如果之后你还想支持不同的 margin 方向，使用比如mt代表margin-top，mb代表margin-bottom等，加上这 4 个方向以后，你的 CSS 大小会变成原来的

vue编写风格有三种template 模板书写风格tsx编写风格函数式组件 h函数//h函数的源码 createVnodeh函数这个东西在Vue3使用的很少了，因为vue3针对template方式做了静态标记极大的优化了性能大家有个了解就可以了，之前为什么会有这个，应为Vue单文件组件编译是需要过程，他会经过parser ->ast ->transform>js api -> generate -> render 而h函数直接跳过这几个阶段直接到render阶段，所以性能上有很大的帮助。

开发移动端最主要的就是适配各种手机vw vh是相对viewport 视口的单位，配合meta标签可以直接使用，无需计算1vw=1/100视口宽度1vh=1/100视口高度当前屏幕视口是375像素，1vw就是3.75pxpostCss 提供了 把Css 转换AST的能力，类似于Babel，为此我们可以编写一个postCss插件用于将px转换为vw。

Tailwind CSSTailwind CSS是一个由js编写的CSS 框架 他是基于postCss 去解析的PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具增强代码的可读性 （利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。）将未来的 CSS 特性带到今天！

PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果.vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。Vue 提供了样式穿透:deep() 他的作用就是用来改变。

编写全局插件插件知识插件有二种形式 一是导出对象形式 二是函数导出对象形式必须包含install方法插件是自包含的代码，通常向 Vue 添加全局级功能。你如果是一个对象需要有install方法Vue会帮你自动注入到install 方法（意思是vue.use(loading)后会自动调用loading插件的install方法） 你如果是function 就直接当install 方法去使用

功能需求一个插件同时实现定义指令 + hooks实现一个监听元素变化的hook主要会用到一个新的API resizeObserver 兼容性一般 可以做polyfill但是他可以监听元素的变化 执行回调函数 返回 contentRect 里面有变化之后的宽高。

Vue3 自定义Hook的作用主要用来处理复用代码逻辑的一些封装Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与hooks 是函数Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数这个在vue2 就已经有一个东西是Mixinsmixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。

directive-自定义指令（属于破坏性更新）Vue中有v-if,v-for,v-bind，v-show,v-model 等等一系列方便快捷的指令 今天一起来了解一下vue里提供的自定义指令Vue3指令的钩子函数created 元素初始化的时候beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom调用beforeUpdate 元素被更新之前调用update 这个周期方法被移除 改用updatedbeforeUnmount 在元素被移除前调用

TIps 在Vue3 v-model 是破坏性更新的v-model在组件里面也是很重要的v-model 其实是一个语法糖 通过props 和 emit组合而成的默认值的改变prop：value -> modelValue；事件：input -> update:modelValue；v-bind 的 .sync 修饰符和组件的 model 选项已移除新增 支持多个v-model新增 支持自定义 修饰符 Modifiers

​我们之前呢是使用Template去写我们模板。现在可以扩展另一种风格TSX风格vue2 的时候就已经支持jsx写法，只不过不是很友好，随着vue3对typescript的支持度，tsx写法越来越被接受，减少我们学习react的成本Ant Design组件库就是使用tsx语法编写的​

跨组件通信最好使用mitt库兄弟组件传参主要是借助父组件传参例如父组件为App 子组件为A 和 B他两个是同级的A 组件派发事件通过App.vue接受A组件派发的事件然后在Props 传给B组件 也是可以实现的缺点就是比较麻烦 ，无法直接通信，只能充当桥梁，组件多了就很麻烦不建议使用兄弟组件

Provide / Inject通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

使用Adobe XD进行制作SVG字体

动画领域有一个比较知名的CSS库：Animate.css，它提供了60多种动画，满足一般网页的需求，比如淡入淡出、闪现等等一系列日常动画，不过虽然它能满足日常需求，但是一些复杂的场景就需要靠JS手动去操作，比如界面滚动到某个元素才开始播放动画，比如拖拽、比如滚动界面时，动态调整元素就需要使用到GreenSock

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡:条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点自定义 transition 过度效果，你需要对transition组件的name属性自定义。并在css中写入对应的样式

内置组件keep-alive有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

11 vue3之插槽全家桶，匿名插槽，具名，作用域，动态插槽

12 vue3之异步组件在大型应用中，我们可能需要将应用分割成小一些的代码块 并且减少主包的体积（不需要在首屏加载得都可使用异步组件）这时候就可以使用异步组件

10 vue3之全局组件，局部组件，递归组件，动态组件

09 vue3之组件传参。

vue3之组件及生命周期 onBeforeMount()在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。onMounted()在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问onBeforeUpdate()数据更新时调用，发生在虚拟 DOM 打补丁之前。onUpdated()DOM更新后，updated的方法即会调用。onBeforeUnmount()在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。onUnmounted()卸载

08 vue3之认识bem架构及less sass 和scopedbem架构他是一种css架构oocss 实现的一种 （面向对象css） ，BEM实际上是block、element、modifier的缩写，分别为块层、元素层、修饰符层，elementUI 也使用的是这种架构

如果用到message 就只会监听message 就是用到几个监听几个 而且是。// 更新时机 组件更新前执行 强制效果始终同步触发 组件更新后执行。watch第三个参数一个options配置项是一个对象{需要侦听特定的数据源，并在单独的回调函数中执行副作用。就是在触发监听之前会调用一个函数可以处理你的逻辑例如。immediate:true //是否立即调用一次。追踪其依赖，并在其依赖变更时重新运行该函数。deep:true //是否开启深度监听。立即执行传入的一个函数，同时。非惰性 会默认调用一次。

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。// 1种写法 函数式写法 不允许修改值。// 2种写法 选项式写法 允许修改值。// 取值一定要加.value。能优化代码 减少多次调用。

针对响应式的有效 修改某个对象的key值 非响应式视图不会改变，源码没做依赖收集和更应依赖，做了会导致BUG 会触发两次。将响应式对象转化为普通对象，不想让视图发生变化可以使用这个。如果原始对象是响应式的是会更新视图并且改变数据的。的就不会更新视图 数据是会变的。

reactive用来绑定复杂的数据类型 例如 对象 数组Aarry Object set map

​ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个.valueproperty，指向该内部值。

npm run dev 直接运行vite会报错查看规则是vite做了个软链接 先在当前项目的node_moudles再到全局最后到环境变量。v-show 用来控制元素的显示隐藏（display none block Css切换）v-else-if 表示 v-if 的“else if 块”。v-if 用来控制元素的显示隐藏（切换真假DOM）v-bind 简写: 用来绑定元素的属性Attr。v-bind 绑定class 案例 2。v-else v-if条件收尾语句。v- 开头都是vue 的指令。