南京x通动力-2024年11月09日

南京x通动力-2024年11月09日

总时长

16分钟

流程

1. 自我介绍

2. 人事问题

3. 鸿蒙的页面和组件的生命周期

4. 鸿蒙的常用的装饰器

5. 鸿蒙的@Entry和Navigation的区别

6. 鸿蒙的ArkTS和Ts的区别

7. 鸿蒙的router和Navigation的对比

8. 鸿蒙的介绍一下Builder

9. 介绍一下vue2 和vue3区别

10. vue3响应的原理

11. 介绍一下深浅拷贝

12. 介绍一下pinia

13. 介绍一下路由导航守卫

14. 介绍一下虚拟DOM树

1. 自我介绍

略过

2. 人事问题

略过

3. 鸿蒙的页面和组件的生命周期

• 组件生命周期 ：
  • aboutToAppear：组件即将显示，可用于准备组件渲染所需的数据，如初始化状态。
  • onAppear：组件已经显示，可在此启动动画效果等与显示相关的操作。
  • aboutToDisappear：组件即将消失，可用于停止正在运行的动画或其他与显示相关的进程。
  • onDisappear：组件消失后，可释放组件占用的资源，如清理事件监听。
• 页面生命周期 ：
  • 除了包含以上的组件生命周期外，还包含以下两个
  • onPageShow：页面显示时触发，可在此进行页面数据的初始化或更新显示相关的操作，比如数据请求和刷新页面视图。
  • onPageHide：页面隐藏时调用，适合清理一些页面相关的定时器、取消网络请求等资源释放操作。

4. 鸿蒙的常用的装饰器

• @Entry：标记组件为应用的入口组件，系统启动时首先加载和渲染此组件，它是整个应用的起始点。
• @Component：用于定义一个组件，表明该类是一个可复用的鸿蒙组件，包含组件的结构和逻辑。
• @Prop：用于在组件之间传递属性值，实现父子组件间的数据传递，父组件可以通过该装饰器向子组件传递数据。

5. 鸿蒙的@Entry和Navigation的区别

• @Entry

  用于定义应用的入口组件，是应用启动时首先加载的组件。

• @Component

  用于声明一个组件，组件内部可以包含构建界面的逻辑，如布局、组件组合等。

• @Prop

  用于实现父子组件间的数据传递，父组件可以通过这个装饰器向子组件传递属性。

• @State

  用于在组件内定义响应式状态变量，当状态发生变化时，会自动触发组件的重新渲染。

• @Link

  用于在组件之间建立双向数据绑定关系，使得多个组件可以共享和同步数据。

• @Watch

  用于监听组件内状态或属性的变化，当被监听的对象发生变化时，可以执行特定的操作。

• @Provide

  用于在组件树中提供数据，通常与 @Consume 配合使用，实现跨组件的数据共享。

• @Consume

  用于在组件树中消费由 @Provide 提供的数据。

• @StorageProp 和 @StorageLink

  作用于应用全局的 UI 状态存储，允许在应用的多个部分之间共享和更新状态。类似于一个全局的状态管理机制，方便在不同的组件

  之间传递和共享数据。

• @LocalStorageProp 和 @LocalStorageLink

  针对页面级别的 UI 状态存储，方便页面间数据共享和更新。与应用全局的存储装饰器类似，但作用范围仅限于当前页面。

• @Observed

  用于观察深层次变量的变化，通常在涉及嵌套对象或数组的场景中使用。被 @Observed装饰的类实例会被代理对象包装，从而实现

  属性的更新通知。

• @ObjectLink：用于嵌套类对象属性的变化，与 @Observed配合使用，实现数据双向绑定。常用于在父子组件之间传递复杂的嵌套数

  据对

• @BuilderParam：用于引用 @Builder函数，当开发者创建了自定义组件，并想对该组件添加特定功能时，可以使用该装饰器。它用

  来装饰指向 @Builder方法的变量，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。

  @Builder

  它用于定义一个构建函数，这个函数可以用来构建组件的一部分或者整个组件的 UI 结构。通过@Builder装饰的函数，能够将复杂的

  UI 构建逻辑进行封装，使得代码更加模块化和可维护。

6. 鸿蒙的 ArkTS 和 Ts 的区别

• 语法特性 ：
  • ArkTS：在 TypeScript 基础上进行了扩展和定制，增加了鸿蒙特定的语法元素。例如，在组件定义、属性装饰等方面有独特的写法，更贴合鸿蒙开发的场景需求。
  • TypeScript：是一种通用的编程语言，具有丰富的类型系统和面向对象编程特性，语法更广泛地适用于各种类型的应用开发，包括前端和后端。
• 应用场景 ：
  • ArkTS：专门用于鸿蒙操作系统的应用开发，与鸿蒙的框架、组件库和设备特性紧密结合，用于开发手机、智能穿戴、智能家居等鸿蒙设备上的应用。
  • TypeScript：可用于多种平台和环境的开发，如 Web 前端开发（包括单页应用、多页应用）、Node.js 后端开发等，生态系统更为广泛。
• 运行环境与编译 ：
  • ArkTS：编译后在鸿蒙操作系统的运行时环境中运行，编译器会针对鸿蒙设备进行优化，确保应用在鸿蒙设备上的性能和兼容性。
  • TypeScript：需要编译为 JavaScript 才能在相应的环境（如浏览器、Node.js）中运行，其编译过程不涉及特定操作系统的优化。

7. 鸿蒙的 router 和 Navigation 的对比

1. router最多页面栈为32个，Navigation 无限制
2. Navigation 支持一多开发，Auto模式自适应单栏跟双栏显示
3. Navigation 支持获取指定页面参数
4. Navigation 清理指定路由
5. Navigation 支持路由拦截

能力对比

业务场景	Navigation	Router
一多能力	支持，Auto模式自适应单栏跟双栏显示	不支持
跳转指定页面	pushPath & pushDestination	pushUrl & pushNameRoute
跳转HSP中页面	支持	支持
跳转HAR中页面	支持	支持
跳转传参	支持	支持
获取指定页面参数	支持	不支持
传参类型	传参为对象形式	传参为对象形式，对象中暂不支持方法变量
跳转结果回调	支持	支持
跳转单例页面	支持	支持
页面返回	支持	支持
页面返回传参	支持	支持
返回指定路由	支持	支持
页面返回弹窗	支持，通过路由拦截实现	showAlertBeforeBackPage
路由替换	replacePath & replacePathByName	replaceUrl & replaceNameRoute
路由栈清理	clear	clear
清理指定路由	removeByIndexes & removeByName	不支持
转场动画	支持	支持
自定义转场动画	支持	支持，动画类型受限
屏蔽转场动画	支持全局和单次	支持 设置pageTransition方法duration为0
geometryTransition共享元素动画	支持（NavDestination之间共享）	不支持
页面生命周期监听	UIObserver.on('navDestinationUpdate')	UIObserver.on('routerPageUpdate')
获取页面栈对象	支持	不支持
路由拦截	支持通过setInercption做路由拦截	不支持
路由栈信息查询	支持	getState() & getLength()
路由栈move操作	moveToTop & moveIndexToTop	不支持
沉浸式页面	支持	不支持，需通过window配置
设置页面标题栏（titlebar）和工具栏（toolbar）	支持	不支持
模态嵌套路由	支持	不支持

8. 鸿蒙的介绍一下 Builder

• 功能作用 ：
  • 在鸿蒙开发中，Builder 是构建应用的关键环节。它负责将开发者编写的 ArkTS 代码、资源文件（如图标、布局文件等）以及配置信息整合在一起。
  • 对 ArkTS 代码进行编译和优化，将其转换为可在鸿蒙设备上高效运行的代码形式。同时，它会处理资源文件，确保资源的正确引用和打包，比如将图片资源压缩并嵌入到应用包中合适的位置。
  • 进行应用的签名和打包操作，生成最终的.hap 安装文件，保证应用的安全性和完整性，使其可以在鸿蒙设备上顺利安装和运行。
• 工作流程 ：
  • 首先，Builder 收集项目中的所有源代码和资源，对 ArkTS 代码进行语法检查和类型验证。然后，根据鸿蒙的开发规范，对代码进行优化，如优化函数调用、内存管理等。接着，将资源文件与编译后的代码进行整合，生成中间文件。最后，进行签名和打包，生成可供发布的.hap 文件。

9. 介绍一下 vue2 和 vue3 区别

• 响应式系统 ：
  • Vue2 ：基于Object.defineProperty()实现响应式，只能对已存在的属性进行数据劫持，对于新添加或删除的属性需要额外处理，如使用Vue.set或Vue.delete。
  • Vue3 ：采用Proxy对象实现响应式，可以代理整个对象，能自动追踪对象属性的新增和删除，响应式系统更加完善和灵活。
• 组件 API ：
  • Vue2：主要使用选项式 API，将数据、方法、生命周期钩子等都放在一个对象内，对于复杂组件，代码逻辑可能会变得混乱，可复用性受限。
  • Vue3 ：推荐使用组合式 API，通过setup函数将相关逻辑提取出来，使得代码更具可读性和可维护性，方便组件的逻辑复用。
• 性能优化 ：
  • Vue2：在一些大型应用中，由于响应式系统的限制和组件更新机制，可能会出现性能瓶颈，尤其是在数据频繁变化的场景下。
  • Vue3 ：在编译模板时进行了更多优化，如静态提升、事件缓存等，提升了渲染性能，同时Proxy的响应式机制在一定程度上减少了不必要的更新，提高了应用的整体性能。

10. vue3 响应的原理

• Vue3 使用Proxy对象创建响应式数据。当创建一个响应式对象时，例如const state = reactive({ count: 0 })，reactive函数内部使用Proxy来拦截对对象的操作。
• 对于对象属性的读取操作，Proxy的get捕获器会被触发，它可以收集依赖，也就是哪些组件或函数使用了这个属性。当属性值发生变化时，通过set捕获器来触发更新。
• 在组件渲染过程中，访问响应式数据时会自动建立依赖关系。当数据变化时，Vue3 能够精确地通知到依赖该数据的组件进行重新渲染，避免了不必要的更新，这种依赖收集和更新通知机制构成了 Vue3 响应式原理的核心。

11. 介绍一下深浅拷贝

• 浅拷贝 ：
  • 例如，对于一个简单对象的浅拷贝，可以使用Object.assign()方法，const newObj = Object.assign({}, oldObj)。如果原对象的属性值是基本类型，新对象和原对象的该属性值是独立的；但如果属性值是对象或数组，新对象和原对象的该属性值指向同一个内存地址，修改其中一个会影响另一个。
• 深拷贝 ：
  • 可以使用JSON.parse(JSON.stringify(obj))来实现简单对象的深拷贝，但这种方法有局限性，比如不能处理函数、循环引用等特殊情况。更复杂的深拷贝可以通过自定义递归函数来处理各种数据类型和特殊情况。

12. 介绍一下 pinia

• Pinia 是 Vue.js 的一个状态管理库，用于在 Vue 应用中管理共享状态。
• 核心概念 ：
  • store ：是 Pinia 中存储状态的核心单元。可以创建多个 store，每个 store 管理一部分相关的状态数据。例如，可以有一个userStore用于管理用户相关的信息，如用户名、登录状态等，还有一个cartStore用于管理购物车中的商品信息。
  • state：在 store 中定义的状态数据，可以是基本类型或复杂类型。在 Vue 组件中可以方便地访问和修改这些状态。
  • actions：类似于 Vuex 中的 mutations 和 actions，用于提交状态变更。可以在 actions 中编写异步操作，如发送 API 请求来获取数据并更新状态。
• 优点 ：
  • 相比 Vuex，Pinia 的 API 更加简洁和直观，代码结构更清晰。它支持 TypeScript，能够更好地进行类型检查，减少错误。同时，Pinia 在 Vue3 中与组合式 API 配合得非常好，可以轻松地在组件的setup函数中使用 store。

13. 介绍一下常用的路由导航守卫

1. 全局前置守卫（router.beforeEach）
   • 这是在路由跳转前触发的守卫。它可以对整个应用的路由跳转进行统一的前置处理。主要用于权限验证，比如检查用户是否登录。
2. 全局后置守卫（router.afterEach）
   • 它在路由跳转完成后被调用。通常用于一些和页面展示相关的操作，例如根据不同的路由来修改页面标题，方便用户了解当前所在页面的内容。也可以用于页面访问统计，记录用户访问的页面路径等信息，用于分析用户行为。
3. 路由独享守卫（beforeEnter）
   • 是在单个路由配置中定义的守卫，只对特定的路由生效。当需要对某个特殊路由进行单独的权限检查或者数据预加载时，就可以使用这个守卫。比如对于一个只有特定用户角色才能访问的管理页面，或者某个页面需要在进入前先加载特定的数据，就可以在这个路由的配置中添加独享守卫来处理这些情况。
4. 组件内守卫
   • beforeRouteEnter：在组件被渲染之前调用。由于此时组件实例尚未创建，所以不能直接访问组件实例的属性和方法。主要用于提前获取数据，这些数据可以是根据路由参数来获取的，然后在组件渲染时就可以直接使用这些数据。
   • beforeRouteUpdate：在当前路由改变，但组件被复用时触发。在有动态路由参数的情况下很有用，当路由参数变化时，利用这个守卫可以更新组件内的数据，确保组件能够根据新的参数正确地显示内容。
   • beforeRouteLeave：在离开当前组件对应的路由时触发。可以用于提醒用户保存未完成的操作，比如用户在表单页面填写了部分内容但未提交，离开时可以弹出提示框询问用户是否要保存。

14. 介绍一下虚拟 DOM 树

• 虚拟 DOM 是一种用 JavaScript 对象表示 DOM 树结构的数据结构。
• 创建过程：在开发过程中，我们编写的模板（如 Vue 模板或 React 的 JSX）会被编译成虚拟 DOM 树。例如，在 Vue 中，模板中的标签、属性、事件等都会被转换为 JavaScript 对象形式的虚拟节点。这些虚拟节点组成了虚拟 DOM 树，每个虚拟节点包含了标签名、属性、子节点等信息。
• 作用：当数据发生变化时，虚拟 DOM 树会重新生成（在 Vue 和 React 中有不同的更新机制），然后通过对比新旧虚拟 DOM 树的差异（这个过程称为 diff 算法）。只将变化的部分更新到真实的 DOM 中，而不是重新渲染整个页面，大大提高了渲染效率。例如，当一个列表中的某个元素数据改变时，通过 diff 算法可以精确地找到这个元素对应的虚拟节点变化，然后只更新该元素在真实 DOM 中的部分，减少了不必要的 DOM 操作，提高了页面的响应速度。