前端知识学习01

1.跨域

什么是跨域？

协议，域名，端口，只要有一个不一样的就认为是跨域。

怎么解决，设置请求头

response.setHeader("Access-Control-Allow-Origin","*"); 中文意思：访问控制允许来源

2.基本数据类型

7种基本类型：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中实现数据依赖和触发视图更新的操作。

写法上：

1. vue3的Template标签支持多个根标签，vue2不支持。
2. 用v-model代替v-model和.sync
3. 新增context.emit与this.$emit作用相同
4. 父组件使用v-slot:插槽名

生命周期：

vue3:

• setup开始创建组件
• onbeforeMount组件挂载到页面之前执行
• onMounted 组件挂载到页面之后执行
• onBeforeUpdate组件更新之前
• onUpdated组件更新之后

ps:生命周期在调用前需要先引入

vue3新加入了对TS和PWA的支持

声明基础类型变量与对象变量时一样区别使用 ref 和 reactive

组合函数返回响应式对象时使用 toRefs

4.怎么实现一个垂直居中布局

1. 父绝子相，子元素top:50%;left:50%;transform: translate(-50%,-50%);
2. 采用flex布局，对align-items和justify-content设置center属性
3. 采用grid布局，父元素display:flex；子元素设置margin:auto;

5.怎么实现一个左侧固定300px,右侧自适应布局

1. .left{
       flex-basis: 300px;
       flex-shrink:0 ;
   }
   .main{
       flex-grow: 1;
   }
   

2. .left{
      width:300px
   }
   .main{
       flex:1;
   }
   

3. 左侧300px,右侧100%

4. grid布局 grid-template-columns:300px 1fr;

6.怎么实现图片懒加载

可以利用getBroundingCliendRect() API来实现，如果elem.getBoundingClientRect().top < document.documentElement.clientHeight

就让elem.src = elem.dataset.src，还可以加上一个节流函数，具体实现代码如下：