忙了1个月了都没时间总结一下，今天终于暂时解放了。
前段时间在用vue开发app组件，都是些翻页勾选跳转的逻辑吧，更深刻认识到了什么时候该用什么，看起来有用的东西全加上了等于没什么卵用。。。
一、vue开发
1.数组及时更新视图问题
要用官方文档上写的那几个方法，才能及时更新视图，不然数据更新了视图还是老样子。
除此之外：清空数组，及时更新视图，可以用arr.splice(0)，arr=[]没什么用。
2.组件卸载
react用惯了再用vue就会发现怎么卸载组件呢，用v-if就可以。
3.父子组件通信数据及时更新问题
父组件给子组件传参，子组件通过props接收。vue没有react的componentWillReceiveProps去更新props，并且对象、数组这样的数据直接在data中赋初值，后续改动的话会直接改变父组件的数据，并且浏览器会报警告，让你去使用computed计算属性。
所以子组件内需要赋初值且后续有改动，可以使用computed，get()中写从props取值，set(newVal)用来保证后续的改动可以写入数据中；也可使用watch监听，对象、数组需要写deep:true。个人觉得watch更简洁，也更容易理解。
对象写计算属性：
props:['file'],
computed: {
myFile: {
get() {
const tmp = {};
for (const key in this.file) {
this.$set(tmp, key, this.file[key]); //用props里的数据进行赋值
}
return tmp;
},
set(newVal) {
for (const key in newVal) {
this.$set(this.myFile, key, newVal[key]);
}
}
}
}数组用watch监听：
props:['preChecked'],
watch: {
preChecked: { //监听父组件传来的数据
handler(newVal, oldVal) {
newVal.map((v, i) => {
if (v !== oldVal[i]) {
this.$set(this.checkedFiles, i, v); //修改子组件的数据
}
});
},
deep: true
}
},二、组件开发
开发了2遍，第一次把所有问题都遇到了，后续越改代码越恶心，就跟穿破的衣服打满了补丁一样。。。然后就决定重构了，主要还是时间来得及。
发现自己开发的时候很容易就把几个组件间耦合起来，这里需要这个数据，要变动，那里也要这个数据传过去，再变动，传来传去晕死，画了好几次图都没搞明白。
首先画图的确很重要，也就是前端的分析设计了，需要先合理划分模块，然后看有哪些参数是必须要传的，哪些共用的方法是不是可以提出来放到一个util.js里面去。
其次，最重要的就是要时刻记得我是在开发“组件”，组件里面的也是组件（代码里的父子孙兄弟关系也很复杂），都需要保持低耦合度。说说容易，实践才能出真知。怎样保持低耦合度呢，谁也没说过呀。。。踩坑经验而得，双向绑定用的很爽的时候，也要记得老祖宗Dom。组件内部的高内聚，用双向绑定很好，而几个组件间的牵连性用dom才比较清爽——低耦合。经常会有a组件的数据变动需要引起b组件的视图更新，那就可以在a组件数据变动时调用b组件的方法this.refs.b.changeView()来更新b组件的视图。记得这个原则，并且在开发过程中要时刻提醒自己，不然很容易“我是要重构的人”结果又混了起来。
其实还有一个问题，需要理清楚要开发什么的话，考虑全面很重要，只有知道会出现哪些情况，才能知道哪里要传什么数据，哪里需要处理哪一个组件的视图等等。。。
在考虑问题这方面还是不足，逻辑思维这一点还是很佩服后台的，以后前端也要多写写分析设计。
（上面这一段都可以不看，重点只有：
组件高内聚的实现：双向绑定
组件间低耦合的实现：用dom操作，即ref
）
