快速了解 mpvue 开发小程序

　　mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js

　　的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

　　一、概念

　　mpvue是 美团 修改了 Vue.js 的 runtime 和 compiler 使其可以运行在小程序环境中，从而引入了整套 Vue.js开发体验的小程序框架。

　　二、优化细节

　　1、实例生命周期

　　不同于vue的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期

　　除了 Vue 本身的生命周期外(详细的 vue 生命周期文档请看生命周期钩子)，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。

　　2、模板语法

　　几乎全支持 官方文档：avada模板语法，但需要注意的是：

　　(1)组件：由于要预编译出 wxml，只能使用单文件组件(.vue 组件)的形式进行支持，不支持：动态组件，异步组件，自定义 render，inline-template，X-Templates，

　　3、注意事项

　　(1)开启单个页面的“下拉刷新”，你需要在该页面文件夹中建一个.json文件，在.json文件中配置

　　{

　　"enablePullDownRefresh":true

　　}

　　(2)如果你先全局注册store，你需要先在src/main里添加在注册到vue实例中：

　　Vue.prototype.$store = store

　　(3)底部导航的图片你需要放在static文件夹下，否则不会正常显示

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

　　(4) 优化长列表性能

　　避免在 v-for 中嵌套子组件，这样可以优化大部分部分 setData 时的冗余数据。

　　通过实践发现 wx:if 和 hidden 的优化肉眼不可见，所以或许可以试试直接通过样式 display 来展示和隐藏。

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

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

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

　　export default {

　　// 只有 app 才会有 onLaunch 的生命周期

　　onLaunch () {

　　// ...

　　},

　　// 捕获 app error

　　onError (err) {

　　console.log(err)

　　}

　　}

　　二、使用

　　通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：

　　npm install --global vue-cli//全局安装vue-cli，如果你已安装@vue/cli，你需要拉取2.x模板：npm install -g @vue/cli-int

　　vue init mpvue/mpvue-quickstart //创建一个基于 mpvue-quickstart 模板的新项目

　　cd my-project //进入项目目录

　　npm install //安装依赖

　　npm run dev //启动构建

　　如果使用vue cli 3先拉取 2.x 模板

　　然后：安装npm包，运行

　　主要特性：

　　使用 mpvue 开发小程序，你将在WordPress小程序技术体系的基础上获取到这样一些能力：

　　1. 彻底的组件化开发能力：提高代码复用性

　　2. 完整的 Vue.js 开发体验

　　3. 方便的 Vuex 数据管理方案：方便构建复杂应用

　　4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

　　5. 支持使用 npm 外部依赖

　　6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

　　7. H5 代码转换编译成小程序目标代码的能力

　　怎么样?是不是比原生的方便很多呢?

　　当然，跑起来以后，你可能还会遇到各种问题，这里我有对我自己遇到的问题做了一些总结 。

  原文出处:王念博客