获得徽章 0
赞了这篇沸点
#1024一起掘金#
今天沸点多出几倍
评论
#1024一起掘金# 周二啦
5
#1024一起掘金#
3
#每天一个知识点# day34
script 标签中的 defer 和 async
作用: script 标签如果直接使用, html 会按顺序下载和执行脚本,并阻碍后续 DOM 的渲染。如果 script 发生延迟,就会阻碍后续的渲染,使得页面白屏。
1.defer
异步下载文件,不阻碍 dom 的渲染,如果有多个 defer 会按顺序执行
执行顺序:在文档渲染后执行,在 DOMContentLoader 事件调用前执行。
2.async
异步下载文件,不影响 dom,如果有多个 ,谁快先执行谁
展开
评论
#每天一个知识点# day33
vue3中ref和reactive的区别
定义数据:
ref通常用来定义基本类型数据
reactive用来定义:对象(或者数组)类型数据
ref也可以用来定义对象或者数组类型的数据,内部会通过reactive转为代理对象
原理:
ref通过Object.defineProperty()的get和set实现数据代理。
reactive使用Proxy实现数据代理,并且通过Reflect操作源对象内部的数据。
使用:
ref操作数据需要.value,template模板中不需要。
reactive都不需要.value
展开
2
#每天一个知识点# day32
Vue中的scopedCSS及其原理

scoped CSS可以让我们在组件中使用CSS样式,这些样式只会作用于当前组件,不会影响到其他组件或全局样式。
使用:在style标签上添加scoped属性即可。其原理是使用了Vue 的编译器将每个组件的 css 样式添加了唯一的属性选择器,以实现样式隔离。
展开
评论
#每天一个知识点# day31
vue中的事件修饰符:
prevent:阻止默认事件
stop:阻止事件冒泡
once:事件只触发一次
capture:使用事件的捕获模式
self:只有event.target是当前操作的元素时才能触发事件
passive:事件的默认行为立即执行,无需等待事件回调执行完毕

@click.stop.prevent
展开
1
#每天一个知识点# day30
数组map、filter方法:
都不改变原数组,
filter:
语法 : array.filter( function ( item, index,arr) {} )
函数内部的return
return true : 满足筛选条件,放入新数组中
return false : 不满足条件,不放入新数组中
map:
callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。
语法:array.map(function(currentValue,index,arr), thisValue)
将return出来的值放入新数组中

map出现undefined的情况:
map 方法需要有返回值,没有给则返回 undefined,新数组与原数组的长度肯定是一样的
解决办法:先用filter过滤掉不要的项,再用map方法
展开
评论
赞了这篇沸点
day31
entries()返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)
评论
#每天一个知识点# day29
vue中h()渲染函数:
import { h } from 'vue'
const vnode = h(
'div', // type
{ id: 'foo', class: 'bar',onClick: () => {} }, // props
[
/*嵌套 children */
]
)
例如:在element的messag里面用h写想要的dom
展开
评论
#每天一个知识点# day28
vue3中attr用法:
在一级组件上加属性
<myCom title='标题'></myCom>
在子孙级中:
const attrs = useAttrs()
<span>{{attrs.title}}</span>
对于多层嵌套组件可以很方便的传递属性值,不用一层一层传递
展开
评论
#每天一个知识点# day27
vue3中组件间通信
1、父传子:props
2、子传父:emit
3、实现父子间相互传值:expose / ref
子组件通过defineExpose暴露指定的数据和方法
父组件中用子组件的ref拿到数据和方法,可通过方法传值给子组件
4、父传后代
provide :父组件里使用的,可以往下传值。
inject :在子(后代)组件里使用的,可以往上取值。
无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。
5、Vuex / pinia
展开
5
#每天一个知识点# day26
vue2中数据更新 ,dom不更新的情况:
1、 对象属性添加或移除
2、数组中利用索引直接设置一个数组项或直接修改数组的长度

解决办法:
Vue.set(即:this.$set)
数组可用splice方法
展开
评论
#每天一个知识点# day25
Cookie、sessionStorage、localstorage 的区别
相同点:
存储在客户端
不同点:
1.cookie数据大小不能超过4k;sessionStorage和localStorage的存储比cookie大得多,可以达到5M+

2.cookie设置的过期时间之前一直有效;localStorage永久存储,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage数据在当前浏览器窗口关闭后自动删除

3.cookie的数据会自动的传递到服务器;sessionStorage和 localStorage数据保存在本地
展开
2
#每天一个知识点# day24
vue中key的作用:
1、key的作用主要是为了高效的更新虚拟dom
2、key是每个VNode的唯一id,依靠key,diff算法可以更准确,更快速。
1
#每天一个知识点# day23
定时器:设定一个定时器,并且设定了等到的时间,当到达执定的时间,浏览器会把对应的方法执行
[常用定时器]
setTimeout([function],[interval])
setInterval([function],[interval])
[function]:到达时间后执行的方法(设置定时器的时候方法没有执行,到时间浏览器帮我们执行)
[interval]:时间因子(需要等到的时间 MS)
setTimeout是执行一次的定时器,setInterval是可执行多次的定时器
[清除定时器]
clearTimeout / clearInterval:这两个方法中的任何一个都可以清除用任何方法创建的定时器
1.设置定时器会有一个返回值,这个值是一个数字,属于定时器的编号,代表当前是第几个定时器(不管是基于setTimeout还是setInterval创建定时器,这个编号会累加)
2.clearTimeout([序号])/clearInterval([序号]):根据序号清除浏览器中设定的定时器
展开
2
#每天一个知识点# day22
1、正则中常用的修饰符
i:ignoreCase 忽略大写小匹配
m:multiline 多行匹配
g:global 全局匹配

2、正则中常用的元字符
[特殊元字符]
\d 0~9之间的一个数字
\D 非0~9之间的任意字符
\w “数字、字母、下划线”中的任意一个 =>/[0-9a-zA-Z_]/等价于\w
\s 匹配任意一个空白字符(包括\t制表符[TAB键四个空格])
\b 匹配边界符 'zhu'(z左边和u右边就是边界) 'zhu-feng'(z左边、u右边、f左边、g右边是边界)
\n 匹配一个换行符
\ 转义字符(把一个普通字符转义为特殊的字符,例如:\d,把有特殊含义的转换为普通意思,例如:\. 此处的点就不是任意字符,而是一个小数点)
. 不仅仅是小数点,代表除了\n以外的任意字符
^ 以某个元字符开头
$ 以某个元字符结尾
x|y x或者y中的任意一个(a|z...)
[xyz] x或者y或者z中的任意一个
[^xyz] 除了x\y\z以外的任意字符
[a-z] 获取a-z中的任意一个字符([0-9] 等价于\d ...)
[^a-z] 除了a-z的任意字符
() 正则分组
(?:) 当前分组只匹配不捕获
(?=) 正向预查
(?!) 负向预查
...
[量词元字符:让其左边的元字符出现多少次]
* 出现零到多次
? 出现零到一次
+ 出现一到多次
{n} 出现N次
{n,} 出现N到多次
{n,m} 出现N到M次
展开
评论
#每天一个知识点# day21
JS中检测数据类型的方式:
typeof 用来检测数据类型的运算符(常用)
特殊:
=>typeof null =>"object"
=>typeof NaN =>"number"
instanceof 检测当前实例是否隶属于某个类
constructor 基于构造器,查找当前实例的构造函数
Object.prototype.toString.call 调用基类Object原型上的toString方法,当方法执行的时候,让方法中的this变为要检测的值,返回当前值对应的类的信息
展开
评论
#每天一个知识点# day20
基于ES语法规范,JS中创建变量的方式有:
var (ES3)
function (ES3) 创建函数(函数名也是变量,只不过存储的值是函数类型的而已)
let (ES6)
const (ES6) 创建的是常量
import (ES6) 基于ES6的模块规范导出需要的信息
class (ES6) 基于ES6创建类
展开
5
关注了
优弧
VIP.5 如鱼得水
前端-bug召唤师
下一页