、div相当于整个页面如何垂直水平居中,至少三种方法
- 使用 Flexbox 布局
设置父容器的 display 为 flex,再通过 align-items 和 justify-content 属性将子元素进行水平和垂直居中。
.parent { display: flex; align-items: center; justify-content: center; }
2.使用绝对定位和 transform 属性
将子元素设置为绝对定位,并使用 top、bottom、left、right 属性将其放置在父容器的中心位置。再使用 transform 属性将子元素向左上角移动50%的距离。
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3.使用 Grid 布局
通过将父容器的 display 设置为 grid,再使用 justify-items 和 align-items 属性将子元素进行水平和垂直居中。
.parent { display: grid; place-items: center; }
数组去重的方法,至少三种?
使用Set数据结构:将数组转换为Set对象,即可去除重复元素,然后再将其转换回数组。例如:[...new Set(array)]
使用filter()和indexOf()方法:使用filter()方法遍历数组并返回一个新数组,其中仅包含第一次出现的元素。在filter()方法的回调函数中,可以使用indexOf()方法来检查当前元素是否已经出现过。例如:array.filter((item, index) => array.indexOf(item) === index)
使用reduce()和includes()方法:使用reduce()方法遍历数组,并将不重复的元素存储在累加器中。在reduce()方法的回调函数中,可以使用includes()方法来检查当前元素是否已经出现过。例如:array.reduce((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], [])
什么是hoc,怎么用,好处,真实应用场景有哪些
HOC(Higher Order Component)是一种在 React 中进行组件复用的技术,通过将一个组件作为参数传递给另一个函数或组件,返回一个新的增强版组件。HOC 可以对现有的 React 组件进行包装,添加新的功能或修改现有的行为,同时还可以使组件代码更具可读性和复用性。
使用 HOC 可以实现以下好处:
1. 代码复用:可以将公共的逻辑抽象为 HOC,避免在多个组件中重复编写相同的代码。
2. 动态生成组件:可以根据不同的需求动态生成不同的组件,提高组件的灵活性和可扩展性。
3. 容器组件与展示组件分离:可以将数据获取等业务逻辑封装在容器组件中,而将展示逻辑封装到展示组件中,使代码更加清晰易懂。
常见的 HOC 应用场景包括但不限于:
1. 条件渲染
2. 认证/授权
3. 数据获取与处理
4. 状态管理
5. 性能优化
6. 路由跳转
7. 日志记录
8. 其他自定义需求
什么是同步异步,微任务宏任务,分别有哪些
同步和异步是指程序在执行代码时是否需要等待操作完成。同步操作会阻塞后续代码的执行,直到该操作完成并返回结果,而异步操作则不会阻塞后续代码的执行,而是立即返回一个 Promise 对象或注册回调函数,在操作完成后才会调用该回调函数。
微任务和宏任务则是指程序中的任务队列,用于管理异步操作。微任务包括 Promise 回调函数、process.nextTick 等,而宏任务则包括整体代码(script)、setTimeout、setInterval、I/O 操作等。
常见的同步操作包括赋值、数学运算、循环等,常见的异步操作包括网络请求、定时器等。常见的微任务包括 Promise 回调函数、MutationObserver 回调函数等,常见的宏任务包括 setTimeout、setInterval、requestAnimationFrame、I/O 操作等。
说说你对 keep-alive的理解,有什么好处,身上有什么属性
keep-alive是Vue.js中的一个组件,用于缓存其他组件。它可以将不需要销毁的组件缓存起来,下次使用时直接从缓存中读取,省去了重新创建和渲染的时间和开销。
使用keep-alive的好处包括:
提高性能:可以减少组件的创建和销毁次数,提高应用的性能。
优化用户体验:可以缩短页面加载时间,提升用户体验。
简化组件逻辑:可以将缓存和非缓存的逻辑分离,使代码更加清晰。
增强组件的复用性:可以将具有相同状态的组件缓存起来,以便在多个地方重复使用。
keep-alive组件具有以下属性:include:指定要缓存的组件列表,只有这些组件才会被缓存。
exclude:指定不需要缓存的组件列表,这些组件不会被缓存。
max:指定缓存的组件数量上限,超过上限的组件会被销毁。
provide/inject:允许缓存的子组件访问父组件的数据和方法。
activated/deactivated:在组件被激活和停用时触发的钩子函数,可以用于控制组件的行为。
git怎么解决冲突
当在 Git 中进行合并操作时,如果两个不同的分支中有相同的文件被修改了,则会产生冲突。Git 提供了以下步骤来解决这些冲突:
1. 切换到要合并的目标分支,并使用命令 `git merge source_branch` 将源分支合并进入当前分支。
2. 如果发生冲突,可以使用命令 `git status` 查看冲突文件列表,然后逐个打开这些文件,查看 Git 在代码中添加的标记,以确定哪些部分需要保留。
3. 手动解决冲突,删除不需要的代码和标记,并保存修改后的代码。
4. 使用命令 `git add` 将修改后的文件添加到暂存区。
5. 最后,使用命令 `git commit` 提交合并后的代码,并添加一条合适的提交信息。
如果在解决冲突的过程中遇到困难,可以使用命令 `git mergetool` 来启动一个可视化工具来帮助解决冲突。
promise api(all,any,race,resolve,reject)
Promise
Promise 是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理和更强大。有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。
一个Promise的当前状态必须为以下三种状态中的一种:等待态(Pending)、执行态(Fulfilled)和拒绝态(Rejected),状态的改变只能是单向的,且变化后不可在改变。
一个Promise必须提供一个 then 方法以访问其当前值、终值和据因。
promise.then(onFulfilled, onRejected)回调函数只能执行一次,且返回 promise 对象
Promise的每个操作返回的都是Promise对象,可支持链式调用。
通过 then 方法执行回调函数,Promise的回调函数是放在事件循环中的微队列。
Promise
的具体用法如下:
function fn(){ return new Promise((resolve, reject)=>{ 成功时调用 resolve(数据) 失败时调用 reject(错误) }) } fn().then(success1, fail1).then(success2, fail2)
Promise.all
Promise.all()
方法用于将多个Promise
实例,包装成一个新的Promise
实例。
Promise.all()
全部子实例都成功才算成功,有一个子实例失败就算失败。Promise.all([promise1, promise2]).then(success1, fail1) promise1`和`promise2`都成功才会调用`success1
Promise.race
Promise.race()
方法也是将多个Promise
实例,包装成一个新的Promise
实例。
Promise.race()
rece是赛跑机制,要看最先的promise子实例是成功还是失败。Promise.race([promise1, promise2]).then(success1, fail1) promise1`和`promise2`只要第一个成功就会调用`success1
Promise.any
Promise.any()
方法同样是将多个Promise
实例,包装成一个新的Promise
实例。
Promise.any()
有一个子实例成功就算成功,全部子实例失败才算失败。Promise.race([promise1, promise2]).then(success1, fail1) promise1`和`promise2`只要有一个成功就会调用`success1
深拷贝和浅拷贝的区别,以及哪些方法能实现深拷贝,哪些方法能实现浅拷贝
1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用
2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”
vue里面computed和wacth的区别 ,computed和methds
一、methods、watch
、computed的区别
1.computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用;
2.methods 方法表示一个具体的操作,主要书写业务逻辑;
3.watch 一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是 computed 和 methods 的结合体;二、Computed与methods对比
同样都可以达到计算属性的效果
1 . computed是属性调用,而methods是函数调用
2 . computed带有缓存功能,而methods不会被缓存属性调用:
(1)、computed定义的方法我们是以属性访问的形式调用,{{computedTest}}
(2)、 methods定义的方法,我们必须要加上()来调用,{{methodTest()}}
缓存功能:
计算属性具有缓存:只有当计算属性所依赖的属性发生改变时,才会重新去计算
methods不会被缓存:方法每次都会去重新计算结果。三、watch
1.watch是观察某一个属性的变化,重新计算属性的值。
2.computed是通过所依赖的属性的变化计算属性值。
3.大部分下watch和computed是没有区别的,但是如果在数据变化的同时进行异步操作的情况下,watch则是最好的选择