[小程序] mpVue 踩坑

最新推荐文章于 2022-05-28 16:30:29 发布

weixin_33851177

最新推荐文章于 2022-05-28 16:30:29 发布

阅读量167

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：https://juejin.im/post/5b494ca66fb9a04f844ab91e

版权

伴随着我司小程序 v1.0.0审核通过、上线，此处应该有一篇mpVue踩坑经历。每一次had been not approved都是个悲剧，555

为何选`mpVue`?

支持VueX；
用mpVue-Router-Patch可使用 Vue-Router书写方式实现页面跳转
熟悉Vue语法（其实也是这个项目，才认识得更深刻！）

搭配使用：VueX、mpVue-Router-Patch、mpVue-wxParse、Flyio

就 - 开始填坑之旅

1. `mpVue`与`vue`生命周期的区别

mpVue支持vue的生命周期、小程序的生命周期，常用beforeMount、mounted、onShow、onUnload。在beforeMount的时候，其实已经是在小程序前几个生命周期onLoad、onReady、onShow之后了。

一开始本着不混用mpVue和小程序生命周期的原则，踩了大坑。如

pages/A?id=1到pages/B 到 pages/A?id=2

重新返回到pages/A?id=1的时候发现，数据竟然是pages/A?id=2的，一开始我将大部分数据放在VueX中，抽出来之后发现，并没那么简单。

参考了官GitHub的多个Issues( #140、#215、#213、#233、#311、#140、#322... 就两个星期的时间，相同原因的Issues个数翻了几倍，数不完 )。

在mpVue中，一个page就是一个Vue实例，关闭页面并没有销毁，beforeDestroy、destroyed基本没用，第二次打开同一个页面的时候，data也不会是初始化的数据。

显示是得填坑啊！最后采取的方式是：在页面级组件定义数组dataArr，页面onLoad（每次打开新页面）时，将组件的data重置为初始化的data并push到dataArr中，页面onHide时，将当前的data存储到对应的dataArr元素中，页面onUnload时，将pop dataArr，相关代码如下

   let dataArr = []
   export default {
    ...,
    onLoad () {
        Object.assign(this.$data, this.$options.data())
        dataArr.push({})
    },
    onHide () {
        dataArr[dataArr.length - 1] = { ...this.$data }
    },
    onUnload () {   // 貌似要销毁数据
        dataArr.pop()
        if (dataArr.length) {
            Object.assign(this.$data, dataArr[dataArr.length - 1])
        }
    },
    ...
   }
复制代码

缺点：要在小程序运行期间，可能需要多次打开的页面中都加上这段处理，略繁琐，应该是可以抽出来配置使用的，暂时还没想到什么方法，555