vue音乐webApp案例分析总结

看了慕课网的vue音乐webApp实战,感觉自己学到了很多东西，无论对vue的整体架构和组件设计都有了清晰的认识，在以后的工作中对组件封装时可能会考虑的多一些，能够有效的掌握组件的边界条件，分清木偶组件和智能组件，合理的实现组件间的参数传递，另外对单项数据流的理解也有一定的认识，类比自己以前做的angularJs的双向数据绑定的实现，确实感觉到组件的易维护和可复用性的重要。

---

由于开发过程中使用的是ES6语法，所以也大大加深了对ES6一些语法的认识。
基本的有：let、const、箭头函数、…对象拓展运算符、import和export、class、promise
还有就是字符串的拓展：如模板表达式 “,数组的新增方法for of 、findIndex()方法…..
再有就是函数的拓展和对象的析构等等。

还要说的就是对vuex和mixin的使用。

关于vuex这里不在多说，我想使用者一定能够分清它的使用场景。在涉及组件间的通讯时方法有很多这里简单的介绍几点：

1、vue父子组件通信可以用Vue.$emit自定义事件来解决。

// 父组件
<single-address @edit-address="editAddress"></single-address>

// 子组件
methods: {
 editAddress () {
  this.$emit('edit-address', false)
 }
}

当然也可以使用props方式解决。

// 父组件
<one-address :addressitems="addressitems"></one-address>
// 子组件
<div>{{ addressitems.partment }}{{ addressitems.address }}</div>
export default {
  props: {
    addressitems: Object
  }
}

二. 非父子组件通信同样也可以用Vue.$emit自定义事件来解决

var app = new Vue()
// 组件A
app.$emit('id-selected', 1)
// 组件B
app.$on('id-selected', function (id) {
 console.log(id)
})

三. vue跨组件跨模块通信

这个在大型复杂的业务中可能就要用到vuex了，vuex的核心可以通过一张图来解释

对就是vue官网的图，为了更好的理解最好还是去官网看看实例在自己敲一遍体会体会。

https://vuex.vuejs.org/zh-cn/

关于mixin的基本认识你可以去看看这两篇文章：http://blog.csdn.net/kuangshp128/article/details/78169266

http://blog.csdn.net/sinat_17775997/article/details/76570822

Mixins一般有两种用途：

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

3、如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次)

4、混入对象中可以定义抽象方法,使用混入的组件必须重写该方法

其它的细节我觉的做的比较好的就是页面的交互上，你可以看到类比原生效果体验。
包括页面的过渡效果和一些动画，无论是节流或者防抖都做了处理，使得js性能得到极大的提升。

还有感触颇深的就是对复杂数据的处理，我们前端从后台得到的数据不一定是我们想要的怎么办？？如何巧妙的进行页面渲染呢？

再往下可能就会涉及到页面的布局和兼容性问题了，当然移动端最重要的就是这两点了

看看时间已经是12：39了，正在找工作的我哎！！！机会难求

还是把这个案例挂在到我的服务器上吧！稍后给出地址