starlog

2021年10月14日

摘要： key的作用：同一层级的节点，通过唯一的key进行区分，key是vnode的唯一标记，参与对比新旧vnode。避免使用index作为key: 当index作为key的时候，新插入一条数据的时候，它后面列表项的key都会变化，key变化的列表项都会重新渲染，但其实它们的新旧vnode是可以复用的，阅读全文

posted @ 2021-10-14 11:18 starlog 阅读(59) 评论(0) 推荐(0)

Vue中的v-for和v-if为什么不能写在一起

摘要： v-for优先级高于v-if，如果v-for和v-if写在一起，会先执行v-for，循环出列表，然后用v-if判断每一个列表项应该使用计算属性，先将不需要的值过滤掉 // DOM <ul> <li v-for="item in filterList" :key="item.id"> {{ item 阅读全文

posted @ 2021-10-14 10:53 starlog 阅读(373) 评论(0) 推荐(0)

Vue中的 v-if与v-show有什么区别

摘要： v-if：如果条件不成立不会渲染当前指令所在节点的DOM元素 v-show：只是切换当前DOM的显示与隐藏阅读全文

posted @ 2021-10-14 10:42 starlog 阅读(49) 评论(0) 推荐(0)

CSS中的元素设置了display: none，是否占据空间

摘要：元素设置了display: none，不占据空间阅读全文

posted @ 2021-10-14 10:33 starlog 阅读(685) 评论(0) 推荐(0)

2021年9月30日

React Hook中的性能优化：memo、useCallback、useMemo

摘要：一、概念 React 性能优化的起因：在React中，默认情况下，当父组件重渲染时，子组件也会重渲染。在React中，子组件默认随父组件更新而更新。 React 性能优化的方向：通过缓存，减少渲染次数、减少重复计算。 React Hook性能优化的总结：memo缓存组件、useCallback缓阅读全文

posted @ 2021-09-30 16:39 starlog 阅读(777) 评论(0) 推荐(0)

JavaScript中的数组去重

摘要： function unique(arr) { let res = []; for (let i = 0; i < arr.length; i++) { let current = arr[i]; if (res.indexOf(current) -1) res.push(current); } re 阅读全文

posted @ 2021-09-30 14:47 starlog 阅读(28) 评论(0) 推荐(0)

JavaScript中的class：实现一个事件类，使用订阅发布模式

摘要： class Event { constructor() { // 存储事件的数据结构 // 为了查找迅速，使用了对象（字典） this._cache = {}; } // 绑定 on(type, callback) { // 为了按类查找方便和节省空间， // 将同一类型事件放到一个数组中 // 这阅读全文

posted @ 2021-09-30 14:27 starlog 阅读(680) 评论(0) 推荐(0)

JavaScript中的递归：对象数组里根据id获取name，对象可能有children属性

摘要： let array = [ { id: 1, name: "001", children: [ { id: 2, name: "002", }, ], }, { id: 3, name: "003", children: [] }, ]; function getFlatArr(arr) { ret 阅读全文

posted @ 2021-09-30 13:46 starlog 阅读(1553) 评论(0) 推荐(1)

2021年9月27日

Vue中的v-model

摘要： v-model是语法糖： <input v-model="sth" /> <input v-bind:value="sth" v-on:input="sth = $event.target.value" /> <input :value="sth" @input="sth = $event.targ 阅读全文

posted @ 2021-09-27 13:51 starlog 阅读(41) 评论(0) 推荐(0)

2021年8月12日

CSS中的画一条0.5px的线

摘要：采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换： .child { transform: scale(0.5, 0.5); } 阅读全文

posted @ 2021-08-12 14:25 starlog 阅读(764) 评论(0) 推荐(0)

yume

公告