用mpvue實現一個簡單的demo
序言
上一篇從騰訊後臺搭建以及搭建本地開發環境這兩個方面進行總結。在進行編碼時，這兩種搭建方式也能提供更好的開發環境，提高實際的開發效率。 這一節主要分享的便是如果用
mpvue實現一個基礎的demo，這個demo主要會從mpvue的特性、結構，以及生命週期來實現，期間遇到的坑，Eknow君也會一步步踩踏實了，走得穩點。
mpvue的特性
徹底的元件化開發能力：提高程式碼 完整的
Vue.js開發體驗
這句話的意思呢，就是說mpvue基本集成了vue的核心程式碼，亦即繼承了vue的核心功能-元件。元件可以拓展html、封裝以及複用程式碼，它闡述一個元件樹是由無數的元件去組成的。通常一個應用會以一棵巢狀的元件樹的形式來組織：
而一個好的元件樹具有封裝性、複用性、拓展性。
封裝性
元件的封裝過程有這幾步驟：【建立一個.vue檔案】-【進行獨立的邏輯處理】-【向外暴露必要的屬性、方法等】。
舉個demo：列表卡片。裡面的資訊包括標題title、內容content、圖片image、時間time等。這是一個獨立的功能項，可以將其封裝起來，只暴露一個Array的屬性變數，非常簡潔、獨立。
此時，其他開發者可以不用關注列表項的細節，只需要專注於當前模組的邏輯處理。
複用性
元件的複用，換個專業術語便是，元件間通訊。以前面的demo列表卡片來講，它只負責裡面UI功能的實現，不負責與服務端進行打交道；而它的父元件能通過它暴露的Array
拓展性
談到拓展性，這個可以說是vue的優秀做法了，利用面向物件的思想，達到元件間相互繼承的目的。
舉個demo：Echarts實現的資料視覺化圖。通過元件化進行圖表的基礎配置，在業務實現的過程中，將extends圖表元件進行折線圖、柱狀圖以及力導向圖等的切換。
小小聊一下，vue也有一個鉤子叫做mixins，這個其實跟extends功能很相似，都是起到混合合併的作用，而它們的區別是extends的優先順序較高，執行的順序要優先於父元件。
mpvue的目錄結構
關於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那裡拿下我的程式碼對比下，希望能有個更深的學習。
結語
總的來講，瞭解一個mpvue的整體架構還是比較簡單的，畢竟玩過vue，懂得一些原理，上手起來是很快的。而無論是生命週期還是結構特性，掌握了主要目的是為了能夠更快地編寫更好的程式碼。業務功能是隻是滿足工作需要，而架構原理才是真正評價一個程式設計師水平的高低的。業務功能是隻是滿足工作需要，而架構原理才是真正評價一個程式設計師水平的高低的。
推薦文章
才華與信仰