掘友等级
获得徽章 0
#1024一起掘金# 谁懂啊!全是谢谢参与
#每天一个知识点# 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
下一页