前端知识学习
1.跨域
什么是跨域？
协议，域名，端口，只要有一个不一样的就认为是跨域。
怎么解决，设置请求头
response.setHeader("Access-Control-Allow-Origin","*"; 中文意思：访问控制允许来源
2.基本数据类型
string，number，bigint，boolean，null，undefined，symbol (ECMAScript 2016新增。
3.vue2和vue3有哪些不同？
响应式上：
vue2的响应式是通过object.defineproperty实现的，JavaScript对象传入vue实例的时候，vue，会遍历所有的peoperty,并通过object.defineporperty把这些property转化为getter和setter,当数据发生变化的时候触发视图的更新，有缺陷，不能监听对象属性的添加和删除
vue3通过Proxy（代理）实现数据读取和拦截，在拦截trap中实现数据依赖和触发视图更新的操作。
写法上：
vue3的Template标签支持多个根标签，vue2不支持。
用v-model代替v-model和.sync
新增context.emit与this.$emit作用相同
父组件使用v-slot:插槽名
生命周期：
vue3:
setup开始创建组件
onbeforeMount组件挂载到页面之前执行
onMounted 组件挂载到页面之后执行
onBeforeUpdate组件更新之前
onUpdated组件更新之后
ps:生命周期在调用前需要先引入
vue3新加入了对TS和PWA的支持
声明基础类型变量与对象变量时一样区别使用 ref 和 reactive
组合函数返回响应式对象时使用 toRefs
4.怎么实现一个垂直居中布局
父绝子相，子元素top:50%;left:50%;transform: translate(-50%,-50%;
采用flex布局，对align-items和justify-content设置center属性
采用grid布局，父元素display:flex；子元素设置margin:auto;
5.怎么实现一个左侧固定300px,右侧自适应布局
.left{ flex-basis: 300px; flex-shrink:0 ; } .main{ flex-grow: 1; }.left{ width:300px } .main{ flex:1; }左侧300px,右侧100%
grid布局 grid-template-columns:300px 1fr;
6.怎么实现图片懒加载
可以利用getBroundingCliendRect( API来实现，如果elem.getBoundingClientRect(.top < document.documentElement.clientHeight
就让elem.src = elem.dataset.src，还可以加上一个节流函数，具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<div class="demo">
<img
data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
alt="1"
/>
<img
data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
alt="2"
/>
<img
data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
alt="3"
/>
<img
data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
alt="4"
/>
<img
data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
alt="5"
/>
<img
data-src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
alt="1"
/>
<img
data-src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
alt="2"
/>
<img
data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
alt="3"
/>
<img
data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
alt="4"
/>
<img
data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
alt="5"
/>
</div>
</body>
<script>
const demo = document.querySelectorAll("img";
// 懒加载函数
function lazy( {
//循环
for (let elem of demo {
//如果getBoundingClientRect(.top小于视窗高度
if (elem.getBoundingClientRect(.top < document.documentElement.clientHeight {
if (elem.dataset.src && elem.src == "" {
elem.src = elem.dataset.src;
}
}
}
}
// 节流
function throttle(t, fn {
let time;
return function ( {
if (!time {
time = setTimeout(( => {
time = null;
fn(;
}, t;
}
};
}
lazy(;
window.addEventListener("scroll", throttle(500, lazy;
</script>
</html>