彻底的组件化开发能力：提高代码 完整的 Vue.js 开发体验
这句话的意思呢，就是说 mpvue 基本集成了 vue 的核心代码，亦即继承了 vue 的核心功能-组件。组件可以拓展 html 、封装以及复用代码，它阐述一个组件树是由无数的组件去组成的。通常一个应用会以一棵嵌套的组件树的形式来组织：
而一个好的组件树具有封装性、复用性、拓展性。
封装性
组件的封装过程有这几步骤：【创建一个 .vue 文件】-【进行独立的逻辑处理】-【向外暴露必要的属性、方法等】。 举个 demo ：列表卡片。里面的信息包括标题 title 、内容 content 、图片 image 、时间 time 等。这是一个独立的功能项，可以将其封装起来，只暴露一个 Array的属性变量，非常简洁、独立。 此时，其他开发者可以不用关注列表项的细节，只需要专注于当前模块的逻辑处理。
复用性
组件的复用，换个专业术语便是，组件间通信。以前面的 demo 列表卡片来讲，它只负责里面UI功能的实现，不负责与服务端进行打交道；而它的父组件能通过它暴露的 Array 属性，将需要的数据传进去，达到数据的渲染，这样便可以达到减少耦合的效果，同时如果其他模块需要用到卡片这个组件，比如收藏啊，评论呀等等。因此，可以复用的组件亦即称为通用组件。
拓展性
谈到拓展性，这个可以说是 vue 的优秀做法了，利用面向对象的思想，达到组件间相互继承的目的。 举个 demo ： Echarts 实现的数据可视化图。通过组件化进行图表的基础配置，在业务实现的过程中，将extends图表组件进行折线图、柱状图以及力导向图等的切换。 小小聊一下， vue 也有一个钩子叫做 mixins ，这个其实跟 extends 功能很相似，都是起到混合合并的作用，而它们的区别是 extends 的优先级较高，执行的顺序要优先于父组件。
pvue的目录结构
关于mpvue初始化的项目结构，一起来看一张图，展示的是主要的目录结构，
project
└───build //编译打包的node.js脚本和webpack配置文件
└───config //用于开发和生产环境下的不同配置
└───src //主要进行小程序功能编写的地方
│──components
│──pages
│──utils
│──app.json
│──App.vue
│──main.js
└───static //用于存放各种小程序本地静态资源
└───package.json //项目的主配置文件
└───project.config.json //用于管理微信开发者工具的小程序项目的配置文件
从这张图可以看出各个目录结构的功能以及应用。一般进行业务开发的时候，一般也只需要在src目录下进行开发即可。
mpvue的生命周期
mpvue （ github 地址请参见 ）是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心， mpvue 修改了 Vue.js 的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
因此，mpvue的生命周期既包括vue的生命周期也包括了小程序的生命周期。 对于小程序的生命周期来讲，分为2种情况。 APP对象有 onLaunch ， onShow 以及 onHide 。 Page对象有 onLoad , onShow , onReady , onHide 和 onUnload 。 而对于vue的生命周期来讲，主要有8个钩子。 【 beforeCreate 】-【 created 】-【 beforeMount 】-【 mounted 】-【 beforeUpdate 】-【 updated 】-【 beforeDestroy 】-【 destroyed 】。 mpvue 由于关联了小程序与 vue 这两种，因此 mpvue 的生命周期实际上是 vue 的实例兼容小程序的生命周期的。一起来参照下mpvue的源码【 mpvue / mpvue-quickstart 初始化后的项目】-【 node_modules 】-【 mpvue 】-【 LIFECYCLE_HOOKS 数组】。
从这张图片可以看出， mpvue的生命周期就是按照这个顺序来对应的。
实现toolsList的简单demo
简介：利用 mpvue 初始化的项目，进行实现一个简单的增删改查的列表 demo ,过程分为几个小步骤。
- 创建一个todolist组件 首先，我们需要在【
src】-【components】创建一个【todolist.vue】；接着在pages新建一个文件夹【todolist】，这是小程序新建一个页面，专门来显示todolist。
project
└───build
└───config
└───src
│──components
│──todolist.vue //创建一个组件
│──pages
│──todolist //创建一个文件夹
│──utils
│──app.json
│──App.vue
│──main.js
└───static
└───package.json
└───project.config.json
- 着手入口文件 在
todolist的文件夹里，新建一个入口文件main.js，这是一个统一的写法，将新创建的组件进行引用以及挂载。
import Vue from 'vue';
import App from './index';
const app = new Vue(App);
app.$mount();
- 新建一个入口组件 创建一个
index.vue的页面，在里面调用components下的todolist.vue组件
<template>
<div>
<todo-list></todo-list>
</div>
</template>
<script> import TodoList from '@/components/todolist';
export default{
components: {
TodoList
},
} </script>
- 实现
todolist的业务逻辑
<template>
<div>
<todo-list></todo-list>
</div>
</template>
<script> import TodoList from '@/components/todolist';
export default{
components: {
TodoList
},
} </script>
- 呈现的效果
ok，基本一个简单的增删改查 demo 已完成，虽然简单，但里面的坑位不少，比如 eslint 规则， wx:for 问题等等，所以有空的老铁可以去 GitHub 那里拿下我的代码对比下，希望能有个更深的学习。
网友评论