vue与小程序的生命周期
VUE的生命周期
创建Vue对象
| // beforeCreated
监听数据
|
初始化事件
| // created
编译模板
| // beforeMount
挂载实例
// mounted
由上分析各个生命周期的情况以及可以做的事情:
beforeCreated // 什么都获取不到,可以加个loading
|
created // 可以获取到data,methods等,但是拿不到dom节点,可以修改数据
|
beforeMount // 跟created差不多
|
mounted // 可以获取到dom,发送请求
| \
| beforeUpdate(进一步更改状态,不会引起附加渲染) —— updateed
|
beforeDestory // 用来清除定时器以及监听
|
destoryed
小程序的生命周期
onLoad // 只加载一次,可获取页面参数
|
onShow // 每次打开页面都会调用一次,可以更改页面数据
|
onReady // 页面初次渲染完成,可执行wx.setNavigationBarTitle
|
onHide // 与onShow呼应
|
onUnload // redirectTo或navigateBack调用,清除定时器等
vue Router 钩子函数
全局钩子函数
// beforeEach 可进行登录拦截,权限判断等
router.beforeEach((to, from, next) => {})
// afterEach
路由独享的守卫
// beforeEnter 相当于组件内的守卫beforeRouteEnter
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {}
}
]
})
组件内的守卫
// 参数都是 to, from, next
beforeRouteEnter // 进入路由之前,不能获取组件实例this
beforeRouteLeave // 当有未保存的内容时,可以阻止页面跳转,也可以存储页面数据
beforeRouteUpdate // 当路由改变,但是该组件仍被复用时调用
英目频道
名乎利乎,道路奔波休碌碌;来者往者,溪山清净且停停
推荐阅读
vue点击空白处
{代码...} 使用 {代码...}
yingmhd赞 1阅读 1k
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...
wuwhs赞 39阅读 4.7k评论 5
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...
原谅我一生不羁放歌搞文艺赞 14阅读 19.8k评论 9
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!
熊的猫赞 16阅读 1.5k评论 2
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...
wuwhs赞 12阅读 2.5k
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...
熊的猫赞 8阅读 1.2k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。