过渡

transition-group 和 transition 不同，transition-group它会以一个真是的元素呈现，默认渲染为span,可以通过 tag属性更换为其它元素
transition-group 内部元素必须提供一个key值当然它本身也可以提供key值使用transition-group包裹的元素添加删除的时候，周围的元素会立刻移动到它新的位置，显得比较生硬要解决这个问题可以使用transition-group组件中提供的 v-move,像之前的类名一样，可以通过 name attribute 来自定义前缀

/* 这里在元素离开时增加一个绝对定位属性 */ 
/* 这样元素离开的瞬间就会触发改变位置，使上面的.list-move生效 */ 
/* 如果不加绝对定位，则元素离开动作完成后周围的元素才会移动到它的位置 */
/* 而那个时候所有过渡已结束 .list-move已经被移除，会造成卡顿感觉 */ 
.list-leave-active { position: absolute; }

取中间值

mid = left + (right - left) / 2; // 防止计算时溢出

git 格式化

git log -1 --pretty=format:" "

控制显示的记录格式，常用的格式占位符写法及其代表的意义如下：选项说明
%H 提交对象（commit）的完整哈希字串
%h 提交对象的简短哈希字串
%T 树对象（tree）的完整哈希字串
%t 树对象的简短哈希字串
%P 父对象（parent）的完整哈希字串
%p 父对象的简短哈希字串
%an 作者（author）的名字
%ae 作者的电子邮件地址
%ad 作者修订日期（可以用 -date= 选项定制格式）
%ar 作者修订日期，按多久以前的方式显示
%cn 提交者(committer)的名字
%ce 提交者的电子邮件地址
%cd 提交日期
%cr 提交日期，按多久以前的方式显示
%s 提交说明

eg:

git log -1 --pretty=format:'%an'
gtw

数组小妙招

Array.prototype.at()接收一个正整数或者负整数作为参数，表示获取指定位置的成员

参数正数就表示顺数第几个，负数表示倒数第几个，这可以很方便的某个数组末尾的元素

例如

var arr = [1, 2, 3, 4, 5]
// 以前获取最后一位
console.log(arr[arr.length-1]) //5
// 简化后
console.log(arr.at(-1)) // 5

vue3

vue3中两种定义响应式数据的区别

ref用来定义：基本类型数据。
ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
reactive用来定义：对象或数组类型数据。
reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源代码内部的数据。
reactive定义的数据：操作数据与读取数据：均不需要.value。当然，我之前就说过，ref可以定义对象或数组的，它只是内部自动调用了reactive来转换。

日常随手笔记（1）

过渡