21.9.14一面复盘

Frank
  • 前端面试
  • 面试复盘
大约 5 分钟约 1389 字...

html

html5 新增了那些标签?

header,nav,footer,aside,article,section,audio,video

html5 常见新增标签open in new window

html5 提供了两种在客户端存储数据的新方法,说一下它们的区别?

  • localStorage 长期存储数据,浏览器关闭后数据不丢失 ,作用域在所有同源窗口中共享

  • sessionStorage 的数据在浏览器关闭后自动删除,作用域当前会话窗口

css

垂直水平居中怎么实现?

  • absolute 元素:利用 top:50%,left:50%和 margin-top,margin-left (元素尺寸已知可用)
  • absolute 元素:利用 top:50%,left:50%和利用 transfrom:translate(-50%,-50%)(元素尺寸不知道也可以用)
  • absolute 元素: top,left,bottom,right=0 和 margin:auto(元素尺寸不知道也可以用)
  • flex:align-items:center;justify-content:center;

定位有那几种,绝对和相对的区别?

相对定位,绝对定位,固定定位

定位open in new window

如何清除浮动?

清除浮动open in new window

js

数组如何转为字符串,字符串转数组呢?

数组的join()方法可以使数组转为字符串;字符串的split()方法可以使字符串转为数组。

  • join()的参数表示以什么字符作为连接符,如果留空则默认以逗号分隔,如同调用 tostring()方法
  • split()的参数表示以什么字符拆分字符串,一般不能留空=>(str.split(''))

数组调用 toString()String()也可以转为字符串

const a = [1, 2, 3, 4, 1, 2, 3]
const b = a.toString()
const c = String(a)
console.log(b) // 1,2,3,4,1,2,3
console.log(c) // 1,2,3,4,1,2,3

数组字符串相关方法

const 和 let 的区别?

const 和 let 的最大区别是:const 一旦声明必须立即初始化

数组 es6 新增方法

ES6_数组的新增方法open in new window

vue

v-if 和 v-show 的区别

条件渲染open in new window

两者都可用来控制 DOM 元素的显示和隐藏,区别在于

v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件被适当地销毁和重建;v-if 也是惰性的,就是初始条件为假的话什么也不做,直到条件第一次变为真时才开始渲染条件块。相比之下,v-show 就简单得多,无论初始条件是什么都会进行渲染,只是简单地基于 CSS 进行切换,隐藏的话就加入 display:none 的属性值。所以 v-if 具有较高的切换开销,适用于运行时条件很少改变的场景,而 v-show 具有较高的初始化渲染开销,适用于需要频繁切换的场景。

说几个生命周期钩子

生命周期open in new window

watch 和 computed 的区别?

watch 对比 computedopen in new window

  • computed 1、 computed 是计算属性,也就是依赖某个值或者 props 通过计算得来得数据; 2、 computed 的值是在 getter 执行之后进行缓存的,只有在它依赖的数据发生变化,会重新调用 getter 来计算; 3、 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化;

  • watch 1、watch 是监听器,可以监听某一个数据,然后执行相应的操作; 2、不支持缓存,数据变直接会触发相应的操作; 3、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值; 4、支持异步操作;

什么时候用 computed 什么时候用 watch 比较合适?

当多个属性影响一个属性的时候,建议用 computed,比如:

fullName(){
 return this.firstName + this.secondName
}

fullName 是由 firstName 和 secondName 影响的,这种情况就适合 computed;

当一个值发生变化之后,会引起一系列的操作,这种情况就适合用 watch;

说一下 Vue 组件通讯

  • props$emit:父组件向子组件传递数据是通过 props 传递的,子组件给父组件传递数据是通过$emit 触发事件来做到的

  • $parent,$children 获取当前组件的父组件和当前组件的子组件

  • $attrs$listeners A->B->C (孙传爷)。Vue 2.4 开始提供了$attrs$listeners 来解决这个问题

  • 父组件中通过 provide 来提供变量,然后在子组件中通过inject来注入变量。(官方不推荐在实际业务中使用,但是写组件库时很常用)

  • $refs 获取组件实例

  • envetBus 兄弟组件数据传递 这种情况下可以使用事件总线的方式

  • vuex 状态管理

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1