Vue全家桶项目实践

Vue全家桶项目实践

最近新建了一个vue项目，整体来说只能算是摸索前进

目的在于尝试使用js建立全盏项目，熟悉vue的使用方法，顺便趟一下各种坑

下面我会不定期的总结一些坑在这里进行留存

简述一下技术盏内容：

前端：vue\vue-cli\iView\axios\webpack

后端：node\express\MongoDB

整个项目在github上，有兴趣的朋友可以下来试试

–>项目链接

开坑…(不定期更新の坑库…)

method的子方法不能使用es6中的()=>{}

这是一个一般来说比较容易出现的问题，但也是相对比较容易找到的问题
不光在method方法中，vue将所有的方法都通过this移动到了vue对象根目录下
因为()=>{}这种方法中this的作用域不同于function(){}中的this所以很明显会挂掉
但是在function方法中的方法还是可以使用()=>{}这种方式的目前es6也比较推荐这种方式

v-for 循环缓存问题

v-for中判别两组数据不同的依据是有不同的v-key的值
当两组不同数据使用相同的key值时会
出现现实上一组列表项的问题
因此每次列表修改过程中要注意对key值做出对应的改变

在这个项目的register页面中就为了这个缓存绞尽脑汁
一开始以为是computed方法带有缓存功能
结果换成watch方法还是出现如下问题
终于发现每一次的key的改变可以影响到被选择列表项的返回值
由此终于发现v-for的key值问题
对于computed缓存的说明
computed是根据数据的依赖关系建立缓存数据
即：依赖的数据发生改变则会导致计算的结果改变，
出现以前出现过的数据后则不重新计算直接从缓存对象中读取之前计算过的数值

关于post请求

components/*.vue

vue组件页面请求后台数据需要使用跨域的方式进行请求！！！

vue-cli创建的项目虽然带有路由系统，但并非完善的express项目
而是一个阉割过的只带有路由功能及一些简单功能的express项目
在正常请求post后台接收到的数据包中不带有数据内容
(疑似是vue项目中没有解析data数据的中间件所导致的)
因此需要使用proxyTable进行跨域设置
关于使用跨域请求的方式在vuejs官网中有相关信息
vuejs官网推荐使用axios作为vuejs项目异步交互组件
相比jquery的ajax方法而言axios自身具备比较完善的promise方法
可以快速的发送多种请求
并可以使用
.then()方法写入回调函数
.catch()方法捕捉交互失败
写法类似于原生的promise方式
比较方便后期维护及查看
并支持.all(),.race()等promise方法
便于异步请求回归同步