记录一下在跑步时遇到的美好瞬间~

夜跑时的照片记录

最近在项目中需要做可视化数据展示，好久没用echarts图表了，遇到了一点小问题，记录一下

双列渐变色柱状图，自定义tooltip框

在练习 Vue3 项目时，用到了 vue-router，所以这里就记录一下，在 Vue3 里，是如何去安装和使用的……

Vue Router@4：安装和使用

JS 中所有任务可以分为 2 种，一种是同步任务（synchronous），一种是异步任务（asynchronous），而异步任务，又可以分为宏任务和微任务……

宏任务和微任务

小时候的旧夏天，婆婆手中缺了口的蒲扇，被风刮断依然接着果实的酸枣树，声声入耳的蝉鸣…….

《新兴村》闲记

css新特性：插槽选择器、全局选择器、动态CSS、CSSmodule…….

学习Vue3第二十五节：CSS的新特性

由于 Vue3 没有 Prototype 属性，所以需要在 main.ts 文件里使用 app.config.globalProperties 去定义全局函数和变量……

学习Vue3第二十四节：定义全局函数和变量

一声梧叶一声秋，一点芭蕉一点愁，三更归梦三更后……

《乡土难离》合集

本文记录自定义指令的钩子函数和基本使用方式，包含自定义图片懒加载、窗口拖拽、权限按钮这些案例……

学习Vue3第二十三节：自定义指令directive

可以使用Mitt库：通过emit派发事件，on方法添加事件，off方法移除事件，clear清空所有事件

学习Vue3第二十一节：Mitt

v-model在组件上可以实现双向绑定，首先让我们回忆一下v-model在原生元素上的用法…..

学习Vue3第二十二节：组件v-model

provide可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以用Inject来接收provide提供的数据或方法

学习Vue3第二十节：依赖注入Provide/Inject

<TransitionGroup>是一个内置组件，用于对v-for列表中的元素或组件的插入、移除和顺序改变添加动画效果……

学习Vue3第十九节：TransitionGroup过渡列表

茶桌上放着刚剥好的甘蔗
瓷瓶里也收拾出几株百合……

《花舍》

随手记录一些代码题、面试题……

随手记题

Pinia 是 Vue 生态里 Vuex 的替代者，是一个全新的 Vue 的状态管理库，允许跨组件/页面共享状态……

Pinia学习

transition有八个生命周期，1. @before-enter="beforeEnter" ：对应enter-from    2. @enter="enter" ： 对应enter-active   3. @after-enter="afterEnter" ： 对应enter-to    4. @enter-cancelled="enterCancelled" ： 显示过渡被打断    5. @before-leave="beforeLeave" ： 对应leave-from    6. @leave="leave" ： 对应enter-active    7. @after-leave="afterLeave" ： 对应leave-to    8. @leave-cancelled="leaveCancelled" ：离开过渡被打断……

学习Vue3第十八节：transition生命周期和appear

Vue提供了transition的封装组件，在条件渲染(v-if)、条件展示(v-show)、动态组件、组件根节点等情形中，可以给任何元素和组件添加进入/过渡效果……

学习Vue3第十七节：transition组件基础用法

有时候我们不需要组件被重新渲染影响使用体验，或者是出于性能考虑，避免多次重复渲染降低性能，我们就可以使用keep-alive，将组件缓存下来，维持当前的状态……

学习Vue3第十六节：内置组件keep-alive

插槽就是子组件中提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件中的<slot></slot>标签…….

学习Vue3第十四节：插槽slot

Teleport是Vue3的新特性之一。是一种能够将我们的模板渲染至指定的DOM节点上，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术，类似于react的Protal.…..

学习Vue3第十五节：Teleport传送组件

如果组件的使用频率特别高（例如 tabcle、input、button......）这些组件几乎每个页面都在使用的话，就可以封装成全局组件……

学习Vue3第十三节：全局、局部、递归、动态组件

父传子：父组件通过v-bind绑定一个数据，子组件通过defineProps接收。子传父：在子组件绑定一个click事件，通过defineEmits派发……

学习Vue3第十二节：父子组件传参

我像是一只找不到方向的野鸽
一次次在彷徨中出发……

《野鸽》

scoped实现组件的私有化，让当前的style只属于当前模块,BEM是Block、Element、Modifier的首字母缩写，分为块层、元素层、修饰符层，它是一种css命名规范……

学习Vue3第十一节：scoped和BEM框架

简单来说， 一个组件从创建到销毁的过程 就称为生命周期Vue应用程序中主要有4个事件，8个钩子……

学习Vue3第十节：Vue3常用的生命周期

watchEffect有两个参数，一个回调函数，一个是对象(设置配置项), 执行传入的一个函数，同时响应式追踪其依赖，并在依赖更新时重新运行该函数……

学习Vue3第九节：watchEffect高级侦听器

computed计算属性就是当依赖的属性的值发生改变的时候，才会触发他的更改，不发生变化的时候，使用的就是缓存中的属性值，它有两种形式的写法……

学习Vue3第七节：computed计算属性

reactive 只支持引用类型（比如：Array、Object、Map、Set），在源码里可以看到reactive做了类型的约束，它不允许我们绑定普通类型，否则会报错……

学习Vue3 第五节：reactive全家桶

watch需要侦听特定的数据源，并在单独的回调函数中执行，它有3个参数……

学习Vue3第八节：watch侦听器

toRef 针对响应式对象 (reactive封装的) 的属性创建一个ref，既保留了响应式，又保留了引用（浅拷贝，改变值时，原对象的值也会发生改变），如果是非响应式对象使用它，则只会改变数据值，不会改变视图值……

学习Vue3第六节：to系列全家桶

虚拟DOM，英文全称 virtual dom，简称 vdom。 本质上就是一个普通的 js 对象，用来描述真实 DOM 的节点信息和属性……

学习Vue3 第三节：虚拟DOM和diff算法

ref 接受一个内部值（可支持所有类型），并返回一个响应式的可变的 ref 对象，被ref包装之后需要.value 来进行取值、赋值……

学习Vue3 第四节：ref全家桶

在 npm run dev 的时候，就会到 node_modules/.bin 里找到对应的映射文件，然后再找到相应的 js 文件来执行

学习Vue3 第二节：npm run dev详解

Vue3新特性介绍：重写双向数据绑定，打破了VDOM的性能瓶颈，Fragments，Tree-Shaking 的支持，Composition API

Vue2.x	Vue3.x	ㅤ
errorCaptured	onErrorCaptured	捕获来自子孙组件的错误时运行
renderTracked	onRenderTracked	用于开发调试，带有event
renderTriggered	onRenderTriggered	用于开发调试，带有event
activated	onActivated	被keep-alive缓存的组件激活时调用
deactivated	onDeactivated	被keep-alive缓存的组件停用时调用

介绍

Vue2.x 对比 Vue3.x

示例：

其他生命周期