uniapp+vue3面试纪要

uniapp+vue3面试纪要

uniapp

1.uniapp的生命周期

应用生命周期
onLaunch：应用程序启动时触发，仅在应用程序第一次启动时触发。
onShow：应用程序进入前台时触发，可以获取到应用程序被打开的方式和场景值。
onHide：应用程序进入后台时触发。
onError：应用程序发生错误时触发，可以用来捕获和处理错误信息。
onUniNViewMessage：监听来自nvue页面的消息。

页面生命周期
onLoad：页面被加载时触发，可以进行数据初始化和网络请求等操作。
onReady：页面渲染完成时触发，可以进行页面动画和交互等操作。
onShow：页面被展示时触发，可以处理页面的显示效果和动画等操作。
onHide：页面被隐藏时触发，可以处理页面的隐藏效果和动画等操作。
onUnload：页面被销毁时触发，可以进行资源释放和清理等操作。

组件生命周期
beforeCreate：组件实例被创建之前触发，此时组件的数据和方法都还没有初始化。
created：组件实例被创建之后触发，此时组件的数据和方法已经初始化。
beforeMount：组件被渲染之前触发，此时组件还没有被渲染到页面上。
mounted：组件被渲染之后触发，此时组件已经被渲染到页面上。
beforeUpdate：组件数据更新之前触发，此时组件的数据还没有被更新。
updated：组件数据更新之后触发，此时组件的数据已经被更新。
beforeDestroy：组件实例被销毁之前触发，此时组件的数据和方法还可以访问。
destroyed：组件实例被销毁之后触发，此时组件的数据和方法已经无法访问。

2.uniapp 图片实现懒加载

<image lazy-load :src="item.pictureId" />

3.uniApp如何实现页面的下拉刷新和上拉加载更多

onReachBottom 
onPullDownRefresh     

4.uniapp中微信登录的流程

1.在微信开放平台注册小程序并获取 appid。
2.在 uni-app 项目中使用 uni.login() 方法获取 code。
3.通过 code 换取 openid 和 session_key。
4.将 openid 和 session_key 作为参数传递给后台服务器，由后台服务器完成登录操作。
5.可以使用 uni.request() 或者其他网络库向后台服务器发送请求，请求参数包括 openid 和 session_key。
6.在 uni-app 项目中使用 uni.getUserInfo() 方法获取用户信息

5.uniapp条件注释的语法

#ifdef 开头，在 #ifdef 后写上在哪个平台执行的代码，以#endif 结尾
APP-PLUS  H5   MP-WEIXIN

<!-- #ifdef MP-WEIXIN -->
...
<!-- #endif -->

6.uniapp分包小程序

1.在项目的 pages.json 文件中配置分包信息。在 "subPackages" 字段下添加一个或多个分包对象，每个分包对象包含以下属性：
"root"：分包根目录的路径，相对于项目根目录。
"pages"：分包内的页面路径列表。
示例：

json
{
  "subPackages": [
    {
      "root": "subpackage1",
      "pages": [
        "page1",
        "page2"
      ]
    },
    {
      "root": "subpackage2",
      "pages": [
        "page3",
        "page4"
      ]
    }
  ]
}
2.在项目根目录下创建分包目录。按照上一步中配置的分包根目录路径，在项目根目录下创建对应的分包目录。
示例：

├─ pages
├─ subpackage1
│  ├─ page1.vue
│  └─ page2.vue
└─ subpackage2
   ├─ page3.vue
   └─ page4.vue
3.在各个分包目录下创建对应的页面文件。根据上一步中配置的分包页面路径，在对应的分包目录下创建对应的页面文件。

4.在应用启动时加载分包。可以在主包的首页或其他需要加载分包的页面中使用 uni.requireSubPackage 方法来动态加载分包。

示例：

javascript
// 在主包的首页或其他页面中加载分包
uni.requireSubPackage('subpackage1', () => {
  // 分包加载成功后的回调函数
  console.log('subpackage1 loaded');
}, (error) => {
  // 分包加载失败时的回调函数
  console.error(error);
});

vue3

1.vue3与vue2的区别

1.性能提升：Vue 3在性能方面进行了优化，通过使用Proxy代理对象、编译器核心重写以及一些其他优化手段，提升了组件的渲染性能。

2.Composition API：Vue 3引入了Composition API，这是一种新的组合式API风格，使得组件的逻辑可以更好地组织和复用。与Vue 2的Options API相比，Composition API提供了更灵活、可组合和可读性更高的代码结构。

3.更好的TypeScript支持：Vue 3对TypeScript的支持更加完善，提供了更准确的类型推导和更好的编辑器支持，使得使用TypeScript开发Vue应用更加顺畅。

4.更小的包体积：Vue 3通过移除不常用的特性，并进行了一些优化，使得打包后的文件体积更小，加载速度更快。

5.更好的响应式系统：Vue 3使用了基于Proxy的响应式系统，相比Vue 2的Object.defineProperty实现，具有更好的性能和更多的特性。

6.新的生命周期钩子：Vue 3引入了一些新的生命周期钩子函数，如beforeUnmount和onRenderTracked等，使得开发者可以更好地控制组件的生命周期。

2.vue3 h函数 创建虚拟节点

h函数是一个用于创建虚拟节点的辅助函数，它接受三个参数：标签名、属性对象、子节点。
import { h } from 'vue';

const vnode = h('div', { 
  class: 'container',
  onClick: handleClick
}, [
  h('h1', 'Hello Vue 3'),
  h('p', 'Welcome to Vue 3')
]);




import { createApp, h } from 'vue';

const App = {
  render() {
    return h('div', 'Hello Vue 3');
  }
};

createApp(App).mount('#app');

3.vue3 页面之间有哪些通信方式

Props/Attributes（属性）：可以通过父组件向子组件传递数据，子组件通过props接收并使用这些数据。父组件可以通过绑定属性的方式将数据传递给子组件。

Emit（事件）：子组件可以通过$emit方法触发自定义事件，并将数据传递给父组件。父组件可以在子组件上监听这些自定义事件，并在相应的事件处理函数中获取子组件传递的数据。

Provide/Inject（依赖注入）：父组件可以通过provide选项提供数据，子组件可以通过inject选项注入这些数据。这种方式可以在整个组件树中共享数据，而不需要显式地通过props进行传递。

EventBus（事件总线）：可以创建一个全局的事件总线实例，用于在不同组件之间传递数据或触发事件。通过事件总线，组件可以在不直接引用彼此的情况下进行通信。

Vuex（状态管理）：对于较大型的应用程序或需要共享状态的组件，可以使用Vuex进行状态管理。Vuex提供了一个全局的状态存储，可以在不同的页面和组件中访问和修改这些状态。

Router（路由）：Vue Router是Vue.js官方提供的路由管理器。通过路由，可以在不同页面之间进行切换，并在路由参数中传递数据。

4.vue3的生命周期

1、setup() : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
2、onBeforeMount() : 组件挂载到节点上之前执行的函数；
3、onMounted() : 组件挂载完成后执行的函数；
4、onBeforeUpdate(): 组件更新之前执行的函数；
5、onUpdated(): 组件更新完成之后执行的函数；
6、onBeforeUnmount(): 组件卸载之前执行的函数；
7、onUnmounted(): 组件卸载完成后执行的函数；
8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

5.vue3中keeplive的作用

1.缓存组件状态：当包裹的组件被切换时，其状态（数据、计算属性等）将被保留，以便在再次激活时恢复到之前的状态，而无需重新初始化。
2.提高性能：通过复用已经创建的组件实例，避免了多次创建和销毁组件的开销，从而提高了应用的性能。
3.控制组件生命周期：使用include和exclude属性可以精确控制哪些组件需要被缓存，哪些组件不需要被缓存。
4.提供钩子函数：<keep-alive>组件提供了一些钩子函数，如activated和deactivated，允许你在组件被激活或停用时执行自定义逻辑。

5.如何修改node_modules包

直接修改第三方库的代码，会带来团队协作的问题，使用patch-package生成补丁包