一名自由程序员:我所整理和收集的前端面试题

Posted 我是真的不会前端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一名自由程序员:我所整理和收集的前端面试题相关的知识,希望对你有一定的参考价值。

【原生App vs. 跨平台App vs. 混合App】优劣对比:

1、原生开发,至少得两套代码,成本高、开发周期长、复杂交互和样式开发麻烦;交互流畅、性能好、能够访问手机原生功能。
2、H5:交互可以做得非常精致、样式也可以精致;不擅长使用手机原生功能。
3、跨平台开发:一套代码运行在多个平台,开发周期短,成本低,招人好招。性能没那么好,卡顿、兼容性略微麻烦、不好做技术选型。
4、混合开发:两个壳子,成本没那么高,开发周期没那么长,性能良好,用原生可以访问手机功能,用H5可以做复杂交互和样式。原生和H5配合比较多。它是介于跨平台APP(或者H5)与原生开发之间的一种权衡方案。

WebView详解

什么混合开发(Hybrid APP)?

android/ios原生App中使用相关组件嵌套H5移动端页面。在当下前端技术中,比如uniapp、rn、小程序、taro中都有了web-view组件,用于支持跨平台APP的混合开发(换句说就是在跨平台App中嵌入H5页面)。

  • 为什么要使用混合开发?
    • 快速开发,把APP中交互复杂、样式复杂的页面抽离成H5页面,节省成本、节省开发时间。
    • 直接显示网络H5页面
  • web-view嵌套H5页面,一种是本地文件,一种线上文件。
    • 说明:公司中一般嵌套网络的H5页面。

APP和webview的通信

url传参(query传参)`<web-view src=‘http://m.3fengs.com?id=20’/web-view>

通过自定义封装message/onPostMessage事件来监听H5页面返回的消息。

单点登录(Single Sign ON = SSO)

  • 常用的登录鉴权方式:cookie/session,token,oAuth第三方登录。
  • 概念:在一套应用程序中,有一个地方登录过,其它应用中可以直接访问(无须登录)。
  • 实现:在服务器上构建一台“认证服务器”,至少得用一个登录页面,还有生成token、验证token的功能。
  • 意义:举一个例子,比如公司里有一个很大的管理系统,因为系统太大不利于维护和开发,通常会把一个大系统拆分成多个子系统,这时就要用到“SSO”,方便用于在多个子系统(APP)之间进行切换。
  • 参考案例:https://login.oracle.com/mysso/signon.jsp
  • 学习资源:https://www.zhihu.com/question/342103776/answer/798611224

为什么vue3.0比vue2.0更快?(1.2-1.3倍)

  • 使用更加高效的Proxy来实现响应式
  • 创建虚拟DOM的方式发生了本质性的变化
    • 生成VM时,给每一个节点添加PatchFlag(-1、0, 1、2、3、4、5、9),标记一个节点的动态类型
    • 生成VM时,对那些静态节点或者静态属性进行“静态提升”,避免对那些静态节点和属性执行二次vm生成。
    • 生成VM时,使用事件缓存,避免重新绑定事件
  • 采用了更加高效的diff运算
    • 同级比较,不断递归,凡是遇到PatchFlag=-1/0不收集脏节点(直接忽略)
  • vite
    • 环境依赖和代码依赖分开了。

Vue3.0若干细节特性

  • v-for 和 v-bind:ref 可以同时使用,在vue3做了相关的性能优化。
  • defineAsyncComponent 用于定义异步组件,但不能用于路由懒加载。
  • $attrs 可以访问父组件传递所有属性(包括class和style)。
  • $children 在vue3.0被移除掉了。
  • app.directive() 自定义指令,指令的钩子函数发生若干变化。
  • 在vue3.0中,data只能是工厂函数,哪怕是根组件中也必须是工厂函数。
  • 在vue3.0中,如果mixin和data中有相同的变量,data会覆盖掉mixin中的这个变量。
  • 在vue3.0中,子组件中要使用 emits:[] 来接收父组件传递过来的自定义事件。
  • 在vue3.0中,$on / $off / $once 这些API被移除了,只保留了 $emit。
  • 过滤器,移除了。
  • 新增了“片段”,在视图模板中可以同时存在多个根节点。
  • vue3.0中“函数式组件”如何编写?
  • 在vue3.0中没有了"Vue"这个构建函数,所以vue2.0中那些静态方法都没有,使用createApp()这个工厂函数创建vue实例,在vue实例上有一些新增方法:app.use() / app.mixin()。
  • 因为Vue.nextTick()不支持TreeShaking,所以在vue3.0中移除了它,使用nextTick这个API来替代。
  • 在vue3.0中,v-if/v-else/v-else-if作用于兄弟节点时,可以不用加key了,vue3.0会自动添加唯一的key。在对多个节点执行“显示隐藏”动画时,可以不用加key了。
  • 动画的六个钩子有两个变了:v-enter-from,v-leave-from。
  • 在vue2.0中,可以使用 Vue.config.keyCodes 自定义键盘码,在vue3.0这个功能移除了。
  • 在vue3.0中,$listeners 移除了。
  • 在vue2.0中,可以使用 el选项或者 m o u n t 进 行 挂 载 , 但 v u e 3.0 中 只 能 通 过 mount进行挂载,但vue3.0中只能通过 mountvue3.0mount进行挂载。
  • vue2.0中的 propsData 这个选项,移除了。
  • 在vue2.0中,render选项(类型是函数),它的第一个参数是 h(渲染函数),在vue3.0中要从vue导入 h 这渲染函数 import h from 'vue'
  • suspense,在React也有,解决异步组件的交互体验,初始化显示fallback插槽中的内容,等待异步组件加载成功。
  • 事件修饰符 .native 移除了。
  • 在vue2.0中同一个类表单上只能使用一个v-model,并且不能自定义修饰符。在vue3.0中,在同一个类表单上可以同时使用多个v-model,语法<MyForm v-model:x='a' v-model:y.m1.m2='b'></MyForm>,在MyForm子组件中使用props接收x和y,使用emits:[‘update:x’,‘update:y’]接收v-model过来的自定义事件。在vue3.0中,v-mode还支持自定义修饰符,在MyForm子组件中使用props来接收自定义修饰符。
  • 在vue2.0中,同一元素上的v-for优先级比v-if高。在vue3.0中,同一元素上的v-if优先级比v-for更高。
  • 在vue3.0中,同时绑定动态属性和静态属性时,与顺序有关。谁在后面谁起作用。
  • 在vue3.0中,销毁阶段的两个生命周期变成了 beforeUnmount、unmounted。还新增两个生命周期 renderTracked、renderTriggered(只在开发环境下起作用)。
  • watch选项的变化:支持对数据进行深度监听,要加deep:true;还支持监听一个对象中的后代属性。

以上是关于一名自由程序员:我所整理和收集的前端面试题的主要内容,如果未能解决你的问题,请参考以下文章

一名自由程序员:我所整理和收集的前端面试题

一名自由程序员:我所整理和收集的前端面试题

一名深漂程序员:我所整理和收集的前端面试题(笔记)

一名深漂程序员:我所整理和收集的前端面试题(笔记)

一名深漂程序员:我所整理和收集的前端面试题

一名深漂程序员:我所整理和收集的前端面试题