mpvue 踩坑笔记

一直想写个小程序，前段时间发现 mpvue 这个框架，可以用 vue 写小程序。简直开心，因为 leader 是个忠实的 react 迷弟，所以 mpvue 的出现同时满足我练手 vue 和小程序的需求，笑容逐渐失控.jpg。

项目的搭建神马的就不说了，可以看这篇介绍或者 mpvue 官网。

emmmm.....那个，下面就是我自己练手时遇到的坑：

1. 小程序的事件 bind 需要替换为 @

比如用户登录：

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息button>
复制代码

在 mpvue 中就需要替换为：

<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">获取用户信息button>
复制代码

2. mpvue 不支持自定义指令 directives

场景是这样，页面中间有个输入框，点击之后跑到顶部，然后让输入框获取焦点。vue 中很常见的解决方式是定义一个自定义指令，但是发现 mpvue 不支持。所以我的解决方法是在 data 中添加一个变量，通过改变这个变量的值来控制输入框的焦点。




复制代码

可能有同学问，为什么要手动控制获焦呢，点击的时候让输入框自己获取焦点不就行了嘛。

因为在这个场景下，点击之后会有个 0.2s 的动画从页面中间跑到顶部，如果让输入框自己获取焦点，那么点击的一瞬间输入框会出现光标，然后 0.2s 后输入框移动到顶部，这个过程就会有种卡顿的感觉。

3. 对 dom 使用 ref，返回 undefined

这个场景是有个列表，以卡片的形式水平依次排开，用户可以左右滑动查看。首先想到的就是 swiper4中文网，但是初始化的时候就GG了，因为无法使用 ref 获取 dom。去 issue 页了解到 v1.0.9 后支持子组件的引用，但对 dom 的支持意愿不大。然后就用了微信小程序提供的 swiper 组件代替。



复制代码

4. v-for 用在组件上刷新的问题

场景是这样，调接口拿到数据列表数组赋值给 data 中的一个变量 list，循环渲染组件。然后接口数据改变，即 list 也跟着改变，但是子组件内部却没有改变。



// ListItem 组件


复制代码

在 ListItem 组件的 updated 生命周期里打印父组件传来的数据，发现没有更新，还是上一次的数据。这个问题出现的原因研究了很久也没有找到（菜- -），然后试着把循环放到 ListItem 里，这个问题就解决了。



// ListItem

复制代码

如果有遇到过这种问题的同学或者解了的大神，求讨论。。。

5. 无法通过 methods 返回值在 html中赋值

如下赋值在 mpvue 中是行不通的。



复制代码

所以这种情况还是要用 computed 来赋值。

但是在循环中，需要根据情况来修改赋值，用 computed 就不好实现，然后 methods 赋值又不支持，所以想了个曲线的实现方式：methods + watch。



复制代码

以上就是我最近尝试 mpvue 遇到的比较大的坑，如有不对的地方、或者同学们有更好的解法，欢迎谈论交流，笔芯??。