Vue入坑系列 （二）

[w4n9H]

Vue入坑系列 （二）

-- Wyz 2018-06-01

上一篇写了一些基础的用法，然后呢，当然是直接上手写项目啦，实战中见真理，感谢公司前端大神指导，入坑二中不会包含什么代码，都是写项目中自己对于vue的一些理解

大致流程

• 在使用脚手架创建项目之后，第一步进行大页面的整体布局
• 第二步页面及样式调整，页面交互，测试数据填充
• 第三步网络请求模块，以及前后端交互

关于UI组件

• ElementUI，用起来挺方便的， 用最少的代码就能写出好看的页面
• iview，没用过，听说还行，不好对比，直接贴个对比文章
• element和iview的对比

关于vue-router

• 这个地方始终搞得不是太懂，尤其是关于children和router-view
• 这两个放在入坑系列三中去填吧，忒复杂

关于components组件

• 在这个项目中我对组件的理解，有点像模块，有点像py中的类，又是一个完整的页面，然后可以通过不同的组件即页面，灵活的组成一个个不同的大的页面，有点模块化的意思
• 而组件中也包含了一些面些对象编程的特性，比如数据(data)，绑定bind，生命周期，方法methods和computed

关于数据

• 首先在vue中data是一个函数，至于为什么，我的理解就像是py类中__init__进行数据初始化一样，声明了一些初始化变量，便于后续使用，大概是这么个意思

关于生命周期

• 生命周期有点类似面向对象编程中的构造函数和西沟函数，或者py中的__init__和__end__，即在这个对象也就是组件被创建和销毁的时候被调用
• 几个比较常见的有created 数据初始化之后，mounted 整个实例被创建完成后，updated 数据被更新，destroyed 被销毁之后，

关于methods和computed

• computed是计算属性，methods是方法，首先将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式确实是相同的
• 不同的是computed计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值，这意味着多次调用computed中的函数，会立刻返回结果
• 而对于method ，只要发生重新渲染，method 调用总会执行该函数

关于axios

• 官方推荐，用于前端和后端发送数据请求的网络组件
• 关于拦截器
  • request 拦截器，可以拦截住前端发往后端的请求，主要用于在请求中加入验证，比如token
  • response 拦截器，可以拦截后端发到前端的数据，可以判断403跳转登录页，检查数据完整性等等
• 请求功能封装，对GET和POST等功能做一次封装，使用时直接调用即可

关于样式css

• 由于本身只会一点css，一直觉得css这种东西简直就是玄学，对于先后顺序有着严格的要求，有时候一条css写在前面或者后面都会有相当大的区别
• 每个组件中的css似乎是单独生效的，多个组件中的css似乎是不会相互影响的
• 关于css的模块化和组件化，可以写一个初始化的css让所有的组件在被自己的css渲染之前先有一个初始化效果
• 还了解了另一种叫less的写法，可以使用一种类似继承的写法，可以在css的{}中嵌套其他的id或者class