Vue编写自定义组件的一个触发条件

说出来可能不信，之前写的Vue代码，一个页面都写在一个文件里。随着需求变复杂，发现越来越多的重复代码。本着又不是不能用，重构了要是出了bug，谁来赔的心思，一直都没有过多的改以前的代码。以前听过一句话，说是做业务代码，最好的办法是把以前的老代码抄一遍，然后改成自己的。以前的老的流程不要变的，不然出了问题，就头疼的。虽然不是什么优雅的办法，但的确管用。
这一次需求变动比较大，以前好多老代码都不需要了。干脆，把业务整理清楚，重写一下。
遇到的一个问题是，一个下拉框，好几个地方用，但是数据需要从服务器拉取。思考过后，决定做成可以用v-model的组件，这样会省很多事情。做自定义组件也不是很复杂，照着Vue的文档，注意一下使用watch,注意value和input配合，还是比较好弄的。做完后，发现没有数据，没有服务器来的数据。经过排查，发现原来是忘了写mounted方法，其他的都写了。
尝到甜头后，就开始思忖着哪里还可以抽出新的组件。于是，可怜的老代码就被我各种大卸八块，变成一个小的组件，唯一比较麻烦的是数据的压力变大了，以前在一个页面，怕变量名不够，写了很多

a: {
b: {
c: {
}
}
}

嵌套了很多层，现在写了组件，可以把数据打平。写自定义组件，问题变成了满天飞了watch, emit什么的。
整个过程，其实和抽象是差不多的，就好像是提取新的方法。以前是写一个大方法，现在写很多小方法，而这些小方法有的还可以复用。
另外一个是需求变复杂了，以前的做法撑下去可能比较复杂，换一个方式代码可能更易于维护。如果需求不变，肯定是不会去写代码的。