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

【原生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选项或者$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；还支持监听一个对象中的后代属性。