<p>彻底的组件化开发能力:提高代码 完整的&nbsp;<code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js</code>&nbsp;开发体验</p> <p>这句话的意思呢,就是说&nbsp;<code>mpvue</code>&nbsp;基本集成了&nbsp;<code>vue</code>&nbsp;的核心代码,亦即继承了&nbsp;<code>vue</code>&nbsp;的核心功能-组件。组件可以拓展&nbsp;<code>html</code>&nbsp;、封装以及复用代码,它阐述一个组件树是由无数的组件去组成的。通常一个应用会以一棵嵌套的组件树的形式来组织:</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016955106" src="/img/remote/1460000016955106" alt="" title="" style="cursor: pointer; display: inline;"></span></p> <p>而一个好的组件树具有封装性、复用性、拓展性。</p> <h4>封装性</h4> <p>组件的封装过程有这几步骤:【创建一个&nbsp;<code>.vue</code>&nbsp;文件】-【进行独立的逻辑处理】-【向外暴露必要的属性、方法等】。 举个&nbsp;<code>demo</code>&nbsp;:列表卡片。里面的信息包括标题&nbsp;<code>title</code>&nbsp;、内容&nbsp;<code>content</code>&nbsp;、图片&nbsp;<code>image</code>&nbsp;、时间&nbsp;<code>time</code>&nbsp;等。这是一个独立的功能项,可以将其封装起来,只暴露一个&nbsp;<code><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></code>的属性变量,非常简洁、独立。 此时,其他开发者可以不用关注列表项的细节,只需要专注于当前模块的逻辑处理。</p> <h4>复用性</h4> <p>组件的复用,换个专业术语便是,组件间通信。以前面的&nbsp;<code>demo</code>&nbsp;列表卡片来讲,它只负责里面UI功能的实现,不负责与服务端进行打交道;而它的父组件能通过它暴露的&nbsp;<code><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></code>&nbsp;属性,将需要的数据传进去,达到数据的渲染,这样便可以达到减少耦合的效果,同时如果其他模块需要用到卡片这个组件,比如收藏啊,评论呀等等。因此,可以复用的组件亦即称为通用组件。</p> <h4>拓展性</h4> <p>谈到拓展性,这个可以说是&nbsp;<code>vue</code>&nbsp;的优秀做法了,利用面向对象的思想,达到组件间相互继承的目的。 举个&nbsp;<code>demo</code>&nbsp;:&nbsp;<code>Echarts</code>&nbsp;实现的数据可视化图。通过组件化进行图表的基础配置,在业务实现的过程中,将extends图表组件进行折线图、柱状图以及力导向图等的切换。 小小聊一下,&nbsp;<code>vue</code>&nbsp;也有一个钩子叫做&nbsp;<code>mixins</code>&nbsp;,这个其实跟&nbsp;<code>extends</code>&nbsp;功能很相似,都是起到混合合并的作用,而它们的区别是&nbsp;<code>extends</code>&nbsp;的优先级较高,执行的顺序要优先于父组件。</p> <h4>pvue的目录结构</h4> <p>关于mpvue初始化的项目结构,一起来看一张图,展示的是主要的目录结构,</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="project └───build //编译打包的node.js脚本和webpack配置文件 └───config //用于开发和生产环境下的不同配置 └───src //主要进行小程序功能编写的地方 │──components │──pages │──utils │──app.json │──App.vue │──main.js └───static //用于存放各种小程序本地静态资源 └───package.json //项目的主配置文件 └───project.config.json //用于管理微信开发者工具的小程序项目的配置文件 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>project └───build <span class="hljs-comment">//编译打包的<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>.js脚本和webpack配置文件</span> └───config <span class="hljs-comment">//用于开发和生产环境下的不同配置</span> └───src <span class="hljs-comment">//主要进行小程序功能编写的地方</span> │──components │──pages │──utils │──app.json │──App.vue │──main.js └───<span class="hljs-keyword">static</span> <span class="hljs-comment">//用于存放各种小程序本地静态资源</span> └───<span class="hljs-keyword">package</span>.json <span class="hljs-comment">//项目的主配置文件</span> └───project.config.json <span class="hljs-comment">//用于管理微信开发者工具的小程序项目的配置文件</span> </code></pre> <p>从这张图可以看出各个目录结构的功能以及应用。一般进行业务开发的时候,一般也只需要在src目录下进行开发即可。</p> <h4>mpvue的生命周期</h4> <p><code>mpvue</code>&nbsp;(&nbsp;<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FMeituan-Dianping%2Fmpvue" rel="nofollow noreferrer" target="_blank">github 地址请参见</a>&nbsp;)是一个使用&nbsp;<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js开发小程序的前端框架。框架基于&nbsp;&nbsp;<code><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js</code>核心,&nbsp;<code>mpvue</code>&nbsp;修改了&nbsp;&nbsp;<code>Vue.js</code>&nbsp;的&nbsp;runtime和&nbsp;compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套&nbsp;&nbsp;<code>Vue.js</code>&nbsp;开发体验。</p> <p>因此,mpvue的生命周期既包括vue的生命周期也包括了小程序的生命周期。 对于小程序的生命周期来讲,分为2种情况。 APP对象有&nbsp;<code>onLaunch</code>&nbsp;,&nbsp;<code>onShow</code>&nbsp;以及&nbsp;<code>onHide</code>&nbsp;。 Page对象有&nbsp;<code>onLoad</code>&nbsp;,&nbsp;<code>onShow</code>&nbsp;,&nbsp;<code>onReady</code>&nbsp;,&nbsp;<code>onHide</code>&nbsp;和&nbsp;<code>onUnload</code>&nbsp;。 而对于vue的生命周期来讲,主要有8个钩子。 【&nbsp;<code>beforeCreate</code>&nbsp;】-【&nbsp;<code>created</code>&nbsp;】-【&nbsp;<code>beforeMount</code>&nbsp;】-【&nbsp;<code>mounted</code>&nbsp;】-【&nbsp;<code>beforeUpdate</code>&nbsp;】-【&nbsp;<code>updated</code>&nbsp;】-【&nbsp;<code>beforeDestroy</code>&nbsp;】-【&nbsp;<code>destroyed</code>&nbsp;】。&nbsp;<code>mpvue</code>&nbsp;由于关联了小程序与&nbsp;<code>vue</code>&nbsp;这两种,因此&nbsp;<code>mpvue</code>&nbsp;的生命周期实际上是&nbsp;<code>vue</code>&nbsp;的实例兼容小程序的生命周期的。一起来参照下mpvue的源码【&nbsp;<code>mpvue</code>&nbsp;/&nbsp;<code>mpvue-quickstart</code>&nbsp;初始化后的项目】-【&nbsp;<code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules</code>&nbsp;】-【&nbsp;<code>mpvue</code>&nbsp;】-【&nbsp;<code>LIFECYCLE_HOOKS</code>&nbsp;<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>】。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016955107" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>从这张图片可以看出,&nbsp;<code>mpvue</code>的生命周期就是按照这个顺序来对应的。</p> <h4>实现toolsList的简单demo</h4> <p>简介:利用&nbsp;<code>mpvue</code>&nbsp;初始化的项目,进行实现一个简单的增删改查的列表&nbsp;<code>demo</code>&nbsp;,过程分为几个小步骤。</p> <p>1.创建一个todolist组件 首先,我们需要在【&nbsp;<code>src</code>&nbsp;】-【&nbsp;<code>components</code>&nbsp;】创建一个【&nbsp;<code>todolist.vue</code>&nbsp;】;接着在&nbsp;<code>pages</code>&nbsp;新建一个文件夹【&nbsp;<code>todolist</code>&nbsp;】,这是小程序新建一个页面,专门来显示todolist。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="project └───build └───config └───src │──components │──todolist.vue //创建一个组件 │──pages │──todolist //创建一个文件夹 │──utils │──app.json │──App.vue │──main.js └───static └───package.json └───project.config.json " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>project └───build └───config └───src │──components │──todolist.vue <span class="hljs-comment">//创建一个组件</span> │──pages │──todolist <span class="hljs-comment">//创建一个文件夹</span> │──utils │──app.json │──App.vue │──main.js └───<span class="hljs-keyword">static</span> └───<span class="hljs-keyword">package</span>.json └───project.config.json </code></pre> <p>2.着手入口文件 在&nbsp;<code>todolist</code>&nbsp;的文件夹里,新建一个入口文件&nbsp;<code>main.js</code>&nbsp;,这是一个统一的写法,将新创建的组件进行引用以及挂载。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue'; import App from './index'; const app = new Vue(App); app.$mount();" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>; <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./index'</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> app = <span class="hljs-keyword">new</span> Vue(App); app.$mount();</code></pre> <p>3.新建一个入口组件 创建一个&nbsp;<code>index.vue</code>&nbsp;的页面,在里面调用&nbsp;<code>components</code>&nbsp;下的&nbsp;<code>todolist.vue</code>组件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> <todo-list></todo-list> </div> <p></template><br /> <script> import TodoList from '@/components/todolist'; <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ components: { TodoList }, } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">todo-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">todo-list</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> TodoList <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/todolist'</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span>{ <span class="hljs-attr">components</span>: { TodoList }, } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>4.实现&nbsp;<code>todolist</code>&nbsp;的业务逻辑</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> <todo-list></todo-list> </div> <p></template><br /> <script> import TodoList from '@/components/todolist'; <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ components: { TodoList }, } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">todo-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">todo-list</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> TodoList <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/todolist'</span>; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span>{ <span class="hljs-attr">components</span>: { TodoList }, } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>5.呈现的效果</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016955108?w=260&amp;h=418" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>ok,基本一个简单的增删改查&nbsp;<code>demo</code>&nbsp;已完成,虽然简单,但里面的坑位不少,比如&nbsp;<code>eslint</code>&nbsp;规则,&nbsp;<code>wx:for</code>&nbsp;问题等等,所以有空的老铁可以去&nbsp;<a href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FjiulingSir%2Fmpvue" rel="nofollow noreferrer" target="_blank">GitHub</a>&nbsp;那里拿下我的代码对比下,希望能有个更深的学习。</p> <p><em>原文链接:<a href="https://www.jianshu.com/p/cd8d681e26a7" rel="nofollow noreferrer" target="_blank">https://www.jianshu.com/p/cd8...</a></em></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_17121.html