- 博客(8)
- 收藏
- 关注
RSS订阅原创 hook使用
假设一个场景如果我们需要在数据渲染到页面的之前让页面loading。mounted 之后停止 loading。beforeUpdata 时开始loading。updatad 之后停止 loading。最简单的方法就是改写组件的生命周期函数，使其在mounted/beforeUpdata /updatad 时通知父组件显示或者隐藏 loading，这样做显示不好，因为侵入了自组件的逻辑，增加的逻辑也和组件本身的功能好不关联。最好的办法就是使用hook。一般使用this.$emit()去触发父组件方法，
2023-05-07 12:59:07
105
原创 判断设置了过长显示省略号css样式的元素是否出现了省略号
其中scrollWidth为元素在没有滚动条时，元素的总宽度(包含padding)，offsetWidth为元素的clientWidth+滚动条+边框。单行时：判断元素scrollWidth与offsetWidth，若大于，则显示了省略号，反之没有；多行时：判断元素scrollHeight与offsetHeight，比较过程同单行；
2023-05-07 12:57:48
1031
原创 keep-alive组件
在 created 函数调用时将需要缓存的 VNode 节点保存在 cache 中,在 页面渲染时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 cache 中取出之前缓存的 VNode 实例进行渲染。使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。任何名称匹配的组件都不会被缓存。只有名称匹配的组件会被缓存。
2023-05-07 12:55:37
1421
原创 关于white-space:nowrap；影响flex布局问题
查询MDN得知：在其他普通布局中，元素的min-width默认值为0，再flex弹性布局中，min-width默认值为0；而当元素设置white-space：nowrap，该元素宽度被撑开。翻译：默认情况下，flex项不会缩小到其最小内容大小（最长单词或固定大小元素的长度）以下。因此，上面例子中右侧元素被撑开，左侧固定宽高元素被挤压。前端开发中经常遇到两列布局，其中左侧固定，右侧自适应。给自适应元素加上css: min-width: 0;效果如下：与我们预期有些出入。
2023-05-07 12:48:18
538
1
原创 Vue 中不要用 index 作为 key，为什么呢？
Vue 中不要用 index 作为 key，为什么呢？首先我们写一个demo，用index作为key会发生什么？<div v-for="(item, index) in list" :key="index">{{item.name}}</div>list: [ { name: '小明', id: '123' }, { name: '小红', id: '124' }, { name: '小花', id: '125' }]渲染为<div ke
2021-07-21 14:23:54
81
原创 函数提升
函数提升看了一些讲解，对函数提升的解释不是很理解，经过学习，下面总结一下，也是对这个知识点的剖析和巩固。什么是提升？引擎会在解释JavaScript代码之前首先对齐进行编译，编译过程中的一部分工作就是找到所有的声明，并用合适的作用域将他们关联起来，这也正是词法作用域的核心内容。简单的说就是在js代码执行前引擎会先进行预编译，预编译期间会将函数声明提升至其对应作用域的最顶端。（即函数提升只会提升函数声明，函数提升是可以直接在函数声明之前调用该函数，并能成功执行它，而不会提升函数表达式（函数表达式就可以
2021-03-03 15:28:13
3159
1
原创 “网红题解答“[‘1’, ‘2’, ‘3’].map(parseInt)输出什么
“网红题解答”[‘1’, ‘2’, ‘3’].map(parseInt)输出什么解答一下这个题目所用的知识点，顺便自己巩固一下，若有不足之处，请各位大佬多多指导。map()方法map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisA
2021-03-02 09:49:50
233
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人