1. flex:1包括什么意思？
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%; //注意不是auto
衍生问题1： flex-basis:auto的意思？
以自身内容宽高为基准，伸缩基于内容宽度的倍率。如果宽度为100px，也就是基于100px的多少倍伸缩
2. v-model能使用什么值？v-model的原理
响应式数据都可以绑定v-model，v-model是v-bind（绑定响应式参数）和v-on（监听视图更新事件）的语法糖
3. ts中的Omit和Pick用法
- Pick<T,K>是采用类型T里面的K属性
interface User {
id:number,
name:string,
age:number
}
//等价于 type UserId = {id:number}
type UserId = Pick<User,'id'>
- Omit<T,K>是排除类型T里面的K属性，生成一个新类型
interface User {
id:number,
name:string,
age:number
}
//等价于 type UserId = {name:string,age:number}
type UserId = Omit<User,'id'>
衍生问题1. 除此之外还有什么衍生类型？
-
Partial将类型的所有属性都变成可选
-
Required将所有的类型都变成必选
-
Readonly 将所有类型都变成成只读
-
ReturnType 提取函数返回值类型
-
Awaited：提取 Promise 的返回值类型，支持嵌套，只提取最后最里面的返回值类型
4. 子组件暴露方法给父组件怎么暴露的，怎么调用的
- 父组件引用子组件绑定ref构建dom实例
- 子组件使用defineExpose暴露对应方法
5. line-height的意思
用于控制文本行间距的参数
6. 图片的优化方法，常用的图片类型除了png/jpg还有什么
- WebP 支持有损/无损压缩+透明通道+动图，整体体积比JPG和PNG都更小;适用于图片，图标，海报，简单动图;优点是压缩率高，兼顾画质与体积，缺点是兼容性比较差，对于部分浏览器需要做降级处理
- AVIF 超高清图片，压缩率比WebP更高
以上两种方案都需要做可能的降级兜底处理
<picture>
<!-- 现代浏览器优先加载 AVIF -->
<source srcset="image.avif" type="image/avif">
<!-- 次选 WebP -->
<source srcset="image.webp" type="image/webp">
<!-- 旧浏览器降级到 JPG/PNG -->
<img src="image.jpg" alt="示例图片" loading="lazy">
</picture>
- SVG 矢量格式，基于XML代码描述图形无损缩放，支持CSS/JS控制动画；适用于图标/Logo/文字图形等;适合小型图标，不适合复杂图案
- Base64 不是简单图片而是二进制编码方式，是二进制编码方式，将图片转为字符串嵌入HTML/CSS，一般用于极小的图标，比如按钮图标；用于减少HTTP请求，无需额外加载图片
图片格式场景选择：
- 照片/海报：优先选择AVIF->其次WebP->兼容JPG(有损压缩，平衡画质和体积)
- 图标/LOGO: SVG
- 简单动图：WebP（体积缩小50%以上）
- 极小图标：Base64嵌入代码（减少HTTP请求）
图片加载策略：
- 懒加载，图片进入视口才加载，减少首屏加载时间
- 预加载，对于首屏关键的图片使用preload强制提前加载，避免白屏
- 响应式加载，对于超大屏和小屏使用不同大小的图片
7. 以下的div的高度是什么？
- line-height是行内高度的倍率
p是块级元素，无论是否有文本，其自身高度由line-height决定，也就是lineHeight*fontSize的数值，因此每个.p标签的高度都是 1x16 === 16px。
.p{
line-height:1,
font-size:16px,
margin-top:10px,
margin-bottom:15px
}
<div>
<p class="p">AAAA</p>
<p class="p"></p>
<p class="p"></p>
<p class="p"></p>
<p class="p">ABBA</p>
</div>
