uniapp+vue3面试纪要

发布时间:2024年01月15日

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生成补丁包
文章来源:https://blog.csdn.net/weixin_44575130/article/details/135605599
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。