协议，域名，端口，只要有一个不一样的就认为是跨域。
response.setHeader("Access-Control-Allow-Origin","*"); 中文意思：访问控制允许来源
7种基本类型：string，number，bigint，boolean，null，undefined，symbol (ECMAScript 2016新增)。
响应式上：
vue2的响应式是通过object.defineproperty实现的，JavaScript对象传入vue实例的时候，vue，会遍历所有的peoperty,并通过object.defineporperty把这些property转化为getter和setter,当数据发生变化的时候触发视图的更新，有缺陷，不能监听对象属性的添加和删除
vue3通过Proxy（代理）实现数据读取和拦截，在拦截trap中实现数据依赖和触发视图更新的操作。
写法上：
生命周期：
vue3:
ps:生命周期在调用前需要先引入
vue3新加入了对TS和PWA的支持
声明基础类型变量与对象变量时一样区别使用 ref 和 reactive
组合函数返回响应式对象时使用 toRefs
.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;
可以利用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 > <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>