前端面试题

1.git的基本命令（代码）

git add(加到缓存),git pull（拉代码）,git commit -m（提交） ,git push（推送）

2.vue3新特性

1.更小
2.更快
3.更好的typeScript支持
4.更好的API
5.更好的性能
vue3与vue2的区别
1.vue3使用了proxy代替了Object.defindProperty来实现响应系统，提高了性能和可维护性
2.vue3的API组合更加灵活，可以更好地组织和复用代码
3.vue3的包大小更小，性能更好

3.css实现div宽高比4：3

position:relative
width:50%
height:0,
padding-top:calc(100%)75%

4.移动端与pc适配方案

1.使用pxtorem px转rem
2.lib-flexible

5.vue-router懒加载方式

路由懒加载指的是打包部署时将资源按照对应的页面进行划分，需要的时候加载对应的页面资源，而不是把所有的页面资源打包部署到一块
1.vue异步组件
2.使用import
3.webpack提供的require.ensure()，该方法可指定相同的chunkName,打包到同一个js文件

6.什么是跨域，跨域的解决办法有哪些

跨域是指，在浏览器中，一个网页试图访问不同域名，不同协议，不同端口的另外一个网页资源
1.jsonp
2.cors
3.代理

7.vite与webpack区别

Vite在开发环境下具有更快的构建速度，并采用了基于原生ES模块的开发方式，而Webpack则更加成熟、稳定，拥有更丰富的插件生态和自定义配置能力

8.浏览器的存储有哪些，有什么区别

1.cookie,数据量太小，只有4k
2.web Storage(LocalStorage,sessionStorage)
LocalStorage存储的数据在浏览器关闭后仍然保留，而SessionStorage的数据在浏览器关闭后会被清除。它们的存储容量一般较大（通常为5MB或更大），但只能存储字符串类型的数据。
3.indexedDB,IndexedDB是一种高级的客户端数据库，可以在浏览器中存储结构化数据。它具有较大的存储容量（通常为几十MB或更大），支持事务操作和索引查询等功能

9.什么是vue

vue是一种用于构建用户界面的开源js框架，提供了一种响应式的数据绑定机制和组件化的开发方式

10.watch和computed区别

1.watch是监听动作，computed是计算属性
2.watch是通过改变一个数据来影响多个数据，computed是多个数据来影响一个数据
3.watch没有缓存只要数据变化就会执行，computed有缓存，只有属性变化时才会计算

11.vue2与vue3的区别

1.根节点不同，vue2必须要有根节点，vue3可以没有，会默认将多个根标签包裹在一个fragement虚拟标签中，有利于减少内存
2.vue2为选项式api，vue3为组合式api
3.双向绑定数据原理不同，vue2是通过object.defindPropert()对数据进行劫持结合发布订阅模式实现
vue3使用proxy代替了object.defindPropert,proxy优势，可以直接监听数组类型变化，因为监听的目标是对象本身，不用想Object.definePorpert()一样监听对象的属性
4.生命周期改变
beforeCreate–>setup()
Create—>setup()
其他前面加onxxxx
beforeDistory -->onBeforeUnmount
distory–>onUnmounted

12.v-if 和 v-for的优先级

vue2,v-for比v-if高级，优先生效
vue3.v-if比v-for高级，优先生效

13.vue组件间的通讯

1.props/$emit
2.ref/$refs
3.eventBus事件总线（$emit / $on）
4.provide / inject
5.$parent / $children
6.$attrs / $listeners

14.性能优化

1.CDN
2.懒加载
3.节流与防抖，防抖，相当于英雄联盟里的回城，事件被触发n秒内执行回调，被打断后重新算时间，节流，相当于平A,在规定时间内，无论被触发多少次都只执行一次
4.回流与重绘
5.图片优化
6.webpack优化，优化 Loader，代码压缩，按需加载，tree shaking删除永远用不到的字段

15.js脚本如何实现异步加载

1.defer

<script type = 'text/javascript' src = 'tools.js' defer = 'defer'> </script>

2.async

<script type = 'text/javascript' src = 'tool.js' async = 'async'></script>

3.创建script节点，插入到DOM中，加载完毕后callBack

16.vue3的组件通信

1.父子proprs / emits
2.v-model / emits(父子互相通信))
3.ref(仅父传子通信)
4.provide / inject(仅爷传孙通信)
5.Vuex
6.缓存

17.判断对象是不是promise对象

Object.prototype.toString.call(obj) == '[object promise]'