浅谈使用mpvue开发小程序需要注意和了解的知识点

什么是mpvue

mpvue 是一个使用 Vue.js 开发小程序的神器，它基于 Vue.js 核心，使用了小程序原生 API, 可以使开发者使用 Vue.js 开发小程序，并且代码可以进行复用。由此得益，我们可以在小程序开发中享受到 Vue.js 带来的双向绑定、过滤器、组件化等便捷的开发体验。

注意点

1. mpvue的坑

mpvue 支持的 Vue.js 版本号受限，如果你团队在使用 Vue.js 2.5.x 不是 “小程序可用” 版本号，在缺失正确的兼容性 Vue 的支持下，将带来编译过程的报错，这是需要开发者注意的点。

2. 原生事件的处理

我们在使用 mpvue 开发小程序时，需要知道其中事件处理的差异。在Vue.js中，我们使用了 v-on 指令来绑定事件，对原生事件没有多大的区别，但是对于一些微信特有的事件或延迟事件，则需要使用 .native 修饰符或者使用原生的事件名称。

3. 小程序原生组件

如果我们想要在MPvue中使用一些小程序原生组件，比如： canvas，map，button 等等，就需要在组件中添加 v-mpvue: 前缀标识，否则编译会出现错误，这也需要开发者注意。

4. 生命周期

mpvue 中的生命周期钩子大多数是和小程序中的生命周期一致，唯一的区别是 created 函数应该写成 mounted ，因为小程序中没有 created 钩子。

5. 响应式数据

和 Vue.js 不同的是，小程序中并不支持改变嵌套数据中的某一个数据，我们需要通过 vm.$set 或者 vm.$forceUpdate 的形式来操作数据，让它可以响应式更新。

示例

1. 原生事件的处理

下面是一个使用 mpvue 中的原生事件的示例：

<!-- 原生事件 -->
<template>
  <button v-on:tap="buttonClick">点我</button>
</template>

<script>
export default {
  methods: {
    buttonClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

2. 小程序原生组件

下面是一个使用小程序原生组件的示例。记得使用 v-mpvue: 前缀：

<!-- map组件示例 -->
<template>
  <div>
    <mpvue-map
      style="width: 100%; height: 300px;"
      longitude="113.324520"
      latitude="23.099994"
    />
  </div>
</template>