mpvue 最佳实践

1. 精简 data 数据

冗余数据不要挂在 data 里，所有在 data/props/computed 中的数据，每次变更都会从微信小程序的 JSCore 进程，通过 setData 序列化成字符串后发送到 JSRender 进程。所以，如果你的数据量巨大的时候，会导致页面非常卡顿。

2. 优化长列表性能

一般情况下这种页面会有大量的数据，除了遵从上面的建议外还有额外的建议。

避免在 v-for 中嵌套子组件，这样可以优化大部分部分 setData 时的冗余数据。
通过实践发现 wx:if 和 hidden 的优化肉眼不可见，所以或许可以试试直接通过样式 display 来展示和隐藏。
如果列表过长，强烈建议产品思考更好的展示形态。比如只展示热门，多余的折叠等形式。
注：我们对其进行了专门优化，最佳实践时和原生小程序代码的性能相差无几。

3. 合理使用双向绑定

• mpvue 建议使用 v-model.lazy 绑定方式以优化性能，此外 v-model 在老基础库下输入框输入时可能存在光标重设的问题。

4. 谨慎选择直接使用小程序的 API

• 如果你有小程序和H5复用代码的需要，业务代码需要保持对 WEB Vue.js 的兼容性。此时我们不建议在代码中直接调用小程序API，更好的选择是通过桥接适配层屏蔽两端差异。

常见问题

• 1.如何获取小程序在 page onLoad 时候传递的 options
  在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。

• 2.如何获取小程序在 app onLaunch/onShow 时候传递的 options
  在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

• 3.如何捕获 app 的 onError
  由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}

参考链接： http://mpvue.com/mpvue/#_17