微信小程序、uniapp、vue生命周期钩子函数
生命周期是指从创建到销毁的过程
一、微信小程序
小程序里面有两种生命周期函数，第一个：通过App()来注册一个小程序 ，第二个：通过Page()来注册一个页面-
应用生命周期函数
app( )
app.js 是小程序执行的入口文件，在 app.js 中必须调用 APP() 函数
APP() 函数用于注册并执行小程序
App({ onLaunch: function(options) { // 监听小程序初始化。小程序初始化完成时（全局只触发一次） }, onShow: function(options) { // 监听小程序显示。小程序启动，或从后台进入前台显示时 }, onHide: function() { // 监听小程序隐藏。小程序从前台进入后台时。 }, onError: function(msg) { console.log(msg) // 错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息 }, onPageNotFound: function(res) { // 页面不存在监听函数。小程序要打开的页面不存在时触发，会带上页面信息回调该函数 }, globalData: 'I am global data' })
-
页面生命周期函数
page( )
每个小程序页面都拥有自己的 .js 文件，且必须调用 page() 函数
page() 函数用于注册小程序页面
Page({ data: { // 页面的初始数据 text: "This is page data." }, onLoad: function(options) { // 生命周期回调—监听页面加载 }, onReady: function() { // 生命周期回调—监听页面初次渲染完成 }, onShow: function() { // 生命周期回调—监听页面显示 }, onHide: function() { // 生命周期回调—监听页面隐藏 }, onUnload: function() { // 生命周期回调—监听页面卸载 }, // ---------------以下不是生命周期钩子函数---------------- onPullDownRefresh: function() { // 监听用户下拉动作 }, onReachBottom: function() { // 页面上拉触底事件的处理函数 }, onShareAppMessage: function () { // 用户点击右上角转发 }, onPageScroll: function() { // 页面滚动触发事件的处理函数 }, onResize: function() { // 页面尺寸改变时触发 }, onTabItemTap(item) { // 当前是 tab 页时，点击 tab 时触发 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // 任意的函数，在页面的函数中用 this 可以访问 viewTap: function() { this.setData({ text: 'Set some data for updating view.' }, function() { // this is setData callback }) }, // 任意数据，在页面的函数中用 this 可以访问 customData: { hi: 'MINA' } })
-
生命周期的调用时间
1.用户首次打开小程序，触发 onLaunch 方法（全局只触发一次）。
2.小程序初始化完成后，触发 onShow 方法，监听小程序显示。
3.小程序从前台进入后台，触发 onHide 方法。
4.小程序从后台进入前台显示，触发 onShow 方法。
5.小程序后台运行一定时间，或系统资源占用过高，会被销毁。
6.全局的 getApp() 函数可以用来获取到小程序 App 实例。
7.onHide函数就是当隐藏页面的时候触发。
- 从中我们可以知道小程序页面的生命周期函数的调用顺序为：onLoad>onShow>onReady。
二、uniapp
App.vue是uniapp的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。
这个文件的作用包括：1,调用应用生命周期函数、2.配置全局样式、3.配置全局的存储globalData
uniapp有三个生命周期：1.应用生命周期 2.页面生命周期 3.组件生命周期
-
应用生命周期（仅在App.vue中有效，其他页面监听无效）
-
页面生命周期
-
组件生命周期（与vue生命周期一致）
三、VUE
-
生命周期钩子函数
-
自定义指令directives的钩子函数
（1）bind（） 绑定指令到元素上，只执行一次。在这里可以进行一次性的初始化设置。
（2）inserted（） 绑定了指令的元素插入到页面中展示时调用，很常用。
（3）update（） 所有组件节点更新时调用
（4）componentUpdated 指令所在的节点及其子节点全部更新完成后调用。
（5）unbind（） 解除指令和元素的绑定，只执行一次。
<template>
<div>
<div id="app"><input v-focus /></div>
<hr>
<p style="width:200px;height:200px" v-pin='colors'>trying</p>
<hr>
<div id="app" v-demo:foo.a.b="message"></div>
</div>
</template>
<script>
import Vue from "vue";
// 1、输入框聚焦
Vue.directive("focus", {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
},
});
// 2、绑定背景颜色
Vue.directive('pin', function(el, binding) { //背景颜色
el.style.background = binding.value
})
// 3、文字显示
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
export default {
name: "directive",
data() {
return {
colors:"",//定义变量接收
message:'left',
}
},
created(){
this.colors="pink"
}
}
</script>
-
路由导航 / 路由守卫 钩子函数
（1）全局守卫
①前置：router.beforeEach（(to,from,next)=>{ }）
②后置：router.afterEach（(to,from)=>{ }）
（2）路由独享守卫
beforeEnter:（to,from,next)=>{ }
（3）导航守卫
①beforeRouteEnter（to,from,next）{ }
②beforeRouteLeave（to,from,next）{ }
(4) 广义上来说，watch、computed这些也属于钩子函数，watch是在监控的数据变化时就会自动执行对应的方法，而computed是在数据变化时再次计算数据
-
keep-alive
- keep-alive有两个钩子函数：
actived: 在激活的时候的使用，第一次激活实在mounted之后执行
dectived:在失活的时候使用。
-
- 除此之外，keep-alive还提供了三个属性
1.include ：记录的是哪些组件可以被缓存
2.exclude: 记录了哪些组件不能被缓存
3.max: 记录的是可以缓存组件的最大数量
浙公网安备 33010602011771号