学吧

AprilSunny_
166 阅读4分钟
JS
1.说说Promise
  • 目的：解决回调地狱，让代码更具有可读性。

new Promise对象的时候传入一个函数，函数接收resolve,reject,调用resolve和reject的时候会改变promise的状态，状态改变后不会再变。

  • 状态：
    pending（未调用resolve和reject时候） fullfilled（调用resolve后） rejected（调用reject后） pending状态时任务执行抛出错误，则变成reject状态。 状态变化后会执行通过.then注册的回调

  • Promise.all()

const promise=Promise.all([p1,p2,p3])
promise.then(...).catch(...)
p1,p2,p3全变为resolved时，promise才返回resolved，有一个rejected就返回rejected
  • Promise.race()
const promise = Promise.race([p1,p2,p3])
只要有一个状态改变，promise就会变成相同的状态
vue
1.vue3.0的变化
  • Vue3.x使用Proxy取代Vue2.x版本的Object.defineProperty

Proxy的优势：
1.Object.defineProperty()无法监听到数组内部的数据变化。 Proxy可以监听到数组和对象内部的变化，也可以监听对象
2.Proxy有apply,deleteProperty等拦截方法，而Object.defineProperty()不具备
3.Proxy返回值是一个对象，可以直接进行操作，而defineProperty()要先遍历所有对象属性值才能进行操作 4.但是相对来说Object.defineProperty()兼容性更高

2.vue2.0对于常用数组方法重写的原因

vue2.0的Obejct.defineproperty的方法无法监听到数组和对象内部的变化，所以vue2.0重写了数组的方法来监听数据变化实现视图更新，对象的更新则使用this.$set。 源码学习：

3.生命周期
beforeCreate:组件尚未被创建，prop,data,methods不可用
**created:组件的prop,data,methods都已创建，皆可用，但是组件的模板尚未开始构建
beforeMount:浏览器中还没有当前组件的DOM结构
**mounted:此时已经把内存中的HTML渲染到浏览器中，浏览器中包含DOM结构
beforeUpdate:将要根据最新的数据重新渲染组件模板 
**updated:已经根据最新的数据完成组件DOM的重新渲染 
beforeDestory:将要销毁但未销毁，组件仍正常工作
**destoryed:组件已完全销毁，在浏览器中的DOM结构已完全移出 
**activated:被keep-alive缓存的组件激活的时候调用
deactivated:被keep-alive缓存的组件失活的时候调用

在created,beforeMount,mounted中可发起接口请求,此时data已经创建，可以将服务端的返回进行赋值。
推荐在created中发起请求，优点是能更快的获取到服务端的数据，减少loading时间。
在mounted前Vue已经把编译好的模板挂载到页面上，所以可以操作dom
4.组件传值
1.父子传值 prop
2.注入依赖：provide/inject
优点：proviede可以给子组件提供数据和方法，无论层级有多深都可以用inject获取
缺点：注入依赖的数据非响应式，不能实时获取到输入的数据
3.$emit
4.eventBus
5.vuex
6.localStorage
7.$parent
8.$children
5.this.$nextTick用法

将回调延迟到下次DOM更新循环后执行，在修改数据后立即使用它，然后等DOM更新

vue中数据和dom渲染是异步的，nextTick用法就是等dom数据渲染完了,再执行回调中的方法
5.vuex

VueX要在什么时候使用？

6.路由懒加载的实现方式：

vue项目实现路由按需加载(路由懒加载)的3种方式_小胖梅的博客-CSDN博客_vue路由懒加载

原因：首屏加载时间更快，更好的用户体验，性能优化
实现方法：
1.vue异步组件：
{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) }

2.路由懒加载(使用import) 
const Home = () => import('@/components/home')
//指定了相同的webpackChunkName，会合并打包成一个js文件
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')

 3.webpack的require.ensure()
 //多个路由绑定相同的chunkName会打包成同一个js文件
 { path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },

7.v-for和v-if不能一起使用

v-for的优先级比v-if高，当两个指令出现在同一个DOM中，v-for渲染的时候每次都会进行v-if的判断，相应的列表也会进行变化。可以通过computed计算属性对数据进行过滤

ps:v-for的时候避免使用index作为key值，这样每次插入一个值key都会变化
React
1.React.memo的使用场景及原理

使用场景：当父组件重新渲染时，没有必要重新渲染的子组件可以使用memo包起来 React.memo的使用场景及原理

TypeScript
1..d.ts文件和declare

ts的.d.ts和declare是干嘛用的

Webpack
1.作用
  • 模块打包：把不同模块的文件打包整合在一起，并保证它们之间引用正确，执行有序。这样在业务开发的时候就可以自由的划分模块，保证项目结构的清晰和可读性
  • 编译兼容：通过webpack的loder机制，可帮我们对代码做polyfill,还可以编译转换scss,less, .vue这种浏览器无法识别的格式文件
  • 插件扩展：通过webpack的plugin,实现按需加载，代码压缩，提升自动化程度，工程效率，打包质量，
2.打包运行原理
  • 打包流程： 1.读取webpack的配置参数
    2.启动webpack，创建compiler对象并开始解析项目
    3.从入口文件（entry）开始解析，并找到其导入的依赖模块，递归遍历分析，形成依赖关系树 4.对不同文件类型的依赖模块文件使用对应的loader进行解析，最终解析为JS文件 5.整个过程中webpack会通过发布订阅者模式，向外抛出一些hooks,而webpack的插件即可通过监听这些关键的事件节点，执行插件任务而达到干预输出结果的目的
avatar
文章
阅读
粉丝