前端学习记录

1.nginx

• 代理：本地运行的时候，vue框架可以帮我们进行代理，不需要考虑跨域之类的问题，也便于书写。
  在项目打包运行，部署测试、试生产、生产环境，vue框架的那些代理就不行了，我们需要脱离编辑器将代码运行起来，nginx就可以。
• 负载均衡：后端的服务会部署好几个，前端可以将他们代理到同一个api下，会有不同的分配策略（默认应该是按循序轮询分配），就可以降低单一服务器的压力，运转起来就快；但是如果部分服务坏了，在有的策略下有的接口就没有办法正常运转，有的会策略下会跳过这个错误的服务的正常分配。
  dns可以解析同一个域名后面的不同ip，所以对于大型的前端（并发及其高的c端产品），前端部署可以用多个nginx对外设置成为一个域名，然后设置运行的策略，会比较智能的将你转到一个离你比较近、比较空闲的服务器。

2.跨域

• 接口跨域：后端解决，他们部署的时候nginx可以进行处理；
• 本地文件的跨域：（直接运行html文件读取本地文件），前端可以选择servez、nginx这些将他们发布成为服务然后进行调用

3.前端发布更新

• 是否更到最新：找一个插件，直接记录打包的时间戳，在测试环境这种需要频繁更新的地方，直接在element里面看打包时间；
  也可以手动修改版本，但是事务繁杂的时候热更新之类的，在敏捷的开发方式下，总会忘记自己修改版本号。

3.vue3与react开发的异同
react里面很多东西都要自己优化，从vue转react并不容易

• usememo 跟computed 功能相同
• useeffect 包含了数据监听（watch)与生命周期的钩子的一些功能-onMounted onBeforeDestory update(监听值修改的时候会触发,每一次修改都会重新执行一边整个里面的副作用，如果是在里面定义的变量之类的会重新被赋值）
• useref在定义变量的时候，是同步的变量，用.current来获取数据，跟vue的useref大同小异，都可以用来获取组件的ref，同时useref是解决上面的重新赋值的一种方法
• usestate 这个就是异步修改的变量，这里如果作为useeffect的依赖，变化的话就会引起update,useref的变化则不会

4.requestAnimationFrame
一个浏览器提供的方法，会在浏览器下一次渲染你之前调用，做js动画的时候会比settimeInterval要流畅，因为后者是宏函数到指定时间间隔之后还需要排队，就没有办法保证每一次的执行时间是一样的就会出现卡顿
每一次执行都会生成一个标识用于排队，执行结束的就会释放，所以要做持续的东西必须再每次执行完成之后重新调用赋值
cancelAnimationFrame 取消的是准备执行动画

用法

let id=null;
function startAnimate(){
     animate(){
       id=requestAnimationFrame(animate)
      }
     id=requestAnimationFrame(animate)
};
function stopAnimate(){
    cancelAnimation(id)
}