掘友等级
获得徽章 0
#1024一起掘金# 谁懂啊！全是谢谢参与![[打脸]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_82.c6f2aee.png)
#每天一个知识点# 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
#每天一个知识点# day32
Vue中的scopedCSS及其原理
scoped CSS可以让我们在组件中使用CSS样式，这些样式只会作用于当前组件，不会影响到其他组件或全局样式。
使用：在style标签上添加scoped属性即可。其原理是使用了Vue 的编译器将每个组件的 css 样式添加了唯一的属性选择器，以实现样式隔离。
#每天一个知识点# day31
vue中的事件修饰符：
prevent：阻止默认事件
stop：阻止事件冒泡
once：事件只触发一次
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才能触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕
@click.stop.prevent
#每天一个知识点# 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方法
#每天一个知识点# day29
vue中h()渲染函数：
import { h } from 'vue'
const vnode = h(
'div', // type
{ id: 'foo', class: 'bar',onClick: () => {} }, // props
[
/*嵌套 children */
]
)
例如：在element的messag里面用h写想要的dom
![[打脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_82.c6f2aee.png)