彻底的组件化开发能力: 提高代码 完整的 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 地址请参见 https://github.com/Meituan-Dianping/mpvue ) 是一个使用 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 https://github.com/jiulingSir/mpvue 那里拿下我的代码对比下, 希望能有个更深的学习.
来源: http://www.jianshu.com/p/cd8d681e26a7