对vue饿了么项目重构之后的一些理解

vue饿了么重构的整理与思考
复制代码

这是我第一次写文章,主要是培养自己独立思考的能力,顺便留下技术的沉淀,看过很多文章都是写博客之后就一直会有动力,也希望自己不断学习,不断的写下去.

从去年开始就关注vue自己也做过一个项目,但只是那种照抄搬得写了,对于很多东西不是很理解,今年来杭州找工作,经历了一番波折,于是决定重新拾起vue,也是本着试试看的态度在慕课网上买了vue仿饿了么,但是发现买了之后学到好多东西,首先对于项目整体架构有了理解,(以前是jq做项目主要是操作DOM,但是vue是数据驱动视图,一切视图的改变主要是数据的改变,只要这点转变过来了就可以了),记得以前大佬告诉过我说,会多少并不重要,重要的是对于项目的整体架构,以前不是很理解,这个项目之后开始发现项目已经慢慢开始能够架构起来了,vue主要思想一定要理解 数据驱动视图

首先附上项目地址:my-sell

对于mvvm的实现原理 通过Directives指令做一层封装然后去改变(视图)DOM上,而视图的改变,这里我理解的是触发事件之后,vue.js监听，再反映到数据上
复制代码

jq的实现原理 传统的jq只是改变DOM,当交互比较复杂的时候非常麻烦,而且频繁的操作DOM也是性能优化的障碍
复制代码

思想转变过来之后就开始架构项目

这是目录结构,如图所示

build config是项目的webpack相关配置,这个有篇文章写得特别好 一字一句的搞懂vue-cli之vue webpack template配置

1.首先是对于页面骨架的开发,就是我刚才说的,要先能架构起项目,之后再给里面填充具体的细节,这里我们采用vue-cli搭建,之后就是页面路由的实现,在头部和不同的路由开始填充一些东西,达到路由可以切换,整个项目骨架清晰,下来就是往骨架里面填充东西的事情
复制代码

剩下的事情就是整个项目的各个组件的开发

1 ● 字体图标的制作 实际项目开发时当将svg转化为iconfont制作工具IconMoon

2 ● 对于模块化的理解 模块化就是将多次复用的代码提取出来,达到复用精简代码的效果,包括js模块化和css模块化,以前的理解只是js模块化,这个项目让我对css模块化有了一定的认识

3 ● vue-router路由机制 vue路由依赖：vue-router 通过组合组件来组成单页应用程序，只需要将组件映射到路由即可。 前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。 需要注意2种模式的区别：hash模式和history模式，hash模式会在后面加一个很丑的#，可以开启history去掉。 hash模式原理：它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。hash可以理解为锚点，例如./index.html/#/foo，hash值为#/foo，这样不会跳转页面。就相当于统一页面的不同锚点，页面间跳转与 ./index.html/#foo到./index.html/#bar类似 路由层面还会包括嵌套路由，动态路由以及重定向，相当于自己模仿浏览器请求然后服务器响应模式，其实不涉及向后端请求，仅在浏览器就可以实现页面跳转

4 ● 对状态管理vuex的理解

为什么要用vuex我的理解是：
(1)多个组件(视图)共享状态:通俗来讲，就是多个组件间会通信时，导致从后端拿来的数据发生变化，当组件较多时，如果兄弟组件间的通信都依赖父组件进行通信，会导致组件间的耦合非常高，从而导致项目逻辑混乱，难以维护。
(2)多个组件（视图）依赖于同一状态。 来自不同视图的行为需要变更同一状态。
(3)它还是一个共享数据中心,多个组件(视图)依赖同一数据时,直接从vuex的action里面拿就可以了,不用重塑请求
(5)真正实现数据驱动视图,vuex state，前端data view，前端DOM actions，用户操作，引起data变化从而导致DOM变化.
一个状态管理库,会涉及到这三个部分:state view action.可以知道的是
(1)state会影响view
(2)view会影响action

vuex的特点是把数据单独隔离,形成一颗状态树,单独隔离就意味着它有自己的生态系统.输入和输出,其中action作为数据的输入,state作为数据的输出,如下图：
复制代码

一定要注意mutation和action的区别！
复制代码

mutation只变更本地的状态，也就是说，直接只去修改store中的数据。 action包含异步操作，直接调用api，通过api的数据，再提交mutation。