一名自由程序员:我所整理和收集的前端面试题
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中只能通过 mount进行挂载,但vue3.0中只能通过mount进行挂载。
- 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;还支持监听一个对象中的后代属性。
以上是关于一名自由程序员:我所整理和收集的前端面试题的主要内容,如果未能解决你的问题,请参考以下文章