主要特点
小程序版本的Vue.js
- 彻底的组件化开发能力:提高代码复用性
- 完整的
Vue.js
开发体验 - 方便的
Vuex
数据管理方案:方便构建复杂应用 - 快捷的
webpack
构建机制:自定义构建策略、开发阶段 hotReload - 支持使用 npm 外部依赖
- H5 代码转换编译成小程序目标代码的能力
生命周期
有趣的是 mpvue 框架的生命周期是融合了vue
和小程序
的生命周期,重新组合的一套兼容 mini-app的一套完整生命周期
注意点
- 在小程序的 onReady 后,才会去出发 mounted 的生命周期
- 如果每次进入页面都要重新请求数据,建议使用 onShow 来请求数据,但是用户体验不太好, 如果只需要在第一次进入页面时请求数据,随后的数据都不改变,应该使用 mounted,不必要频繁的去请求接口、刷新页面。 3.官方文档上建议使用 Vue 的生命周期函数
- 小程序的
onPullDownRefresh
能够检测到页面下拉动作,可以用来实现上拉刷新的操作, 需要搭配stopPullDownRefresh
来使用 onReachBottom
页面上拉触底事件的处理函数,
mpvue 暂时不能使用的语法
- 不支持
纯-HTML
,小程序不支持所有的 DOM 和/BOM 操作,v-html
的语法是不能用的 - 尽量不要在代码的双花括号中处理数据,例如:三元判断,字符处理等等的,
compouted
是更好的选择 - 在列表循环渲染时: 一定要牢记,千万不要在嵌套的 for 循环中使用相同的 index
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
- 事件修饰符:
.stop
能处理一些预料之外的情况 - 不支持在组件引用时,在组件上定义原生的事件(click),并且 class 和 style 等样式属性也不会生效,解决样式的问题: 写在内部顶级元素上,不要使用 scoped 来限制,可以加一个顶级 class 来防止 class 样式外泄