Vue的数据驱动和组件化让写web app变得轻松了很多，加上vue-router和vuex等工具，构建大型应用也不难。

但是一路写来，突然意识到自己写组件方法的方式使得方法难于测试、难于复用、可维护性差。

这要从Vue组件中任何数据在方法中都可以通过this方便地获取说起，当初刚接触Vue时，看到这个特性，觉得挺好用，没有多去想，所有方法就按照这种方式写了。而所有有意复用的函数则预先抽离出来，一切是如此的美好。直到我想复用某个组件方法时，才发现通过this引用数据的方式使得它没有办法直接复用。

进一步思考才发现，所有组件方法都依赖于通过this获取的数据，同时直接改变相应的数据。这是Vue的方式，就像直接进行DOM操作时，需要获取DOM节点，同时改变DOM节点一样。而且对于简单的逻辑，这种方式更是简单方便。

但是当某个方法需要处理的逻辑变得复杂时，最好将主体逻辑抽象成一个函数，甚至是多个函数，通过参数传入数据，同时使用返回值进一步改变数据。

这样做的好处是抽象出来的函数是可复用的，是易于测试的，同时组件方法变得简单易于理解，这些带来的是更好的可维护性。