mpvue采坑总结

在入坑小程序的日志中,原生开发,wepay开发,mpvue开发,tato开发还是uni-app,其实框架还是因人而异,如果只想干干净净走微信小程序的话,不建议使用多端开发框架(多端开发现在还不是很成熟,很多条件编译,什么的维护成本很大,小公司不建议使用),我个人还是比较推荐1.4.0版本的mpvue,mpvue2.0版本后也是走多端路线,1.4.0版本的mpvue还是很不错的,但是坑还是有的,以下我分享几点我在开发中常遇到的坑:

1. 在模板语法里面调用methods方法(或者说没办法调用computed以外的函数),有人也许会说,那可以用computed属性,那如果我想给函数传参怎么办?

   处理方案: 处理完再交给模板渲染,先将异步得到的数据直接处理,在模板中直接使用即可

2. 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的

    mounted () {
        // 加入了属性,但是模板木有响应式更新
       this.student.age = 24
        // 错误写法,vue1.0
       this.$set(this.student.age, 24)
        // 增加属性,同时视图响应式更新
        this.$set(this.student,"age", 24)
    }

适用场景:动态添加选中状态,例如:

image

image

如果我们不使用this.$set(),实际上删除操作后,需要我们重新异步获取list数据,最关键是小程序上体验会很不好(会闪一下),同时也节省了一定资源

3. 所有页面里面的created生命周期函数 都会在小程序加载的时候，一次性执行，而不是每进入一个页面执行一次.
4. 官方给的生命周期图示里面，也表明了，小程序的onLoad、onReady比created、mounted执行的早，
   也就是说如果我们在和onLoad onReady里面去请求数据的话，会相对的减少白屏时间（这里说的白屏是指数据未渲染的界面），而且官方没说明为什么不建议使用小程序的生命周期，我们也尝试了，用小程序的生命周期，没发现生命问题，所以我还是比较倾向优先使用小程序的生命周期，毕竟用户体验才是王道
5. 官方文档中小程序的页面路径最多只能十层，也就是说你访问过的页面，正常都会保存在内存里，相当于vue里的keep-alive,这里存在一个数据更新的问题(如果没有数据更新,商品列表点击进入商品详情后,之后点击任何一个商品都是第一个商品的详情内容),怎么解决呢,直接的方式就是在onshow周期里面重置数据,但是交互不好,如果不是很必要的话,还是推荐onLoad里面重置数据(它比beforeMounted执行更早)