vue音乐webApp案例分析总结

Dear 丶 2022-05-30 01:18 166阅读 0赞

> 看了慕课网的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的核心可以通过一张图来解释

![这里写图片描述][vuex.png]

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

[https://vuex.vuejs.org/zh-cn/][https_vuex.vuejs.org_zh-cn]

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

[http://blog.csdn.net/sinat\_17775997/article/details/76570822][http_blog.csdn.net_sinat_17775997_article_details_76570822]

> Mixins一般有两种用途：
> 
> 1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
> 
> 2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
> 
> 3、如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次)
> 
> 4、混入对象中可以定义抽象方法,使用混入的组件必须重写该方法

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

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

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

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

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

[vuex.png]: https://vuex.vuejs.org/zh-cn/images/vuex.png
[https_vuex.vuejs.org_zh-cn]: https://vuex.vuejs.org/zh-cn/
[http_blog.csdn.net_kuangshp128_article_details_78169266]: http://blog.csdn.net/kuangshp128/article/details/78169266
[http_blog.csdn.net_sinat_17775997_article_details_76570822]: http://blog.csdn.net/sinat_17775997/article/details/76570822