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);
});
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生成补丁包