Vue功能臃肿后进行分离

当使用Vue开发时，会因为只写method在同一个方法中，造成页面达到上千行，翻页都翻得人头疼！！！

还有就是一个方法写在了多个地方，造成阅读障碍。例如：

今天开发就遇到了这个问题。哭死。下午果断决定，分离！即使不能及时完成也必须分离！其实主要是因为有俩个功能还是其他地方会用到的。

 

所用环境

IDEA2018.2.2，Chrome72，jdk1.8

 

开始操作

单独分离一个页面，script 标签导入放在vue所在页面的后边！！！这个最主要。

 

所用到的词汇

接口方法：写在new Vue()的methods中的方法，比如：

        loadCloudList: function () {
            loadCloudList();
        },

实现方法：写于单独分离出去的方法，在这个方法中可以很详细的写实现过程，最重要的是可以调用vue中的变量。（比如，vm.hello()）。上面接口调用的方法实现为：

function loadCloudList() {
    $.ajax({
        type: "POST",
        async: false,
        url: "/test",
        contentType: "application/json",
        dataType: "json",
        success: function (result) {
            if (result != null && result.code === 0)
                vm.list = result.list;
        }
    });
}

对了，记得在不同的Vue实例中调用的时候，同步加上data变量。。。大家都按照一个标准加，不要和当前页面的数据重复了！！！

在html标签中使用vue会因为写在标签外部不能用！所以必须在vue中单独写一个名字相同的方法，然后才能避免报错。(这样能解决一部分问题。但是后来我又遇到另一个问题的时候，思虑良久。发现是js写的顺序问题。。。如果vue的引用在共用js之前，就会报错。如果在之后，就不会报错。。。但是如果在之后，写上类似接口的调用方式，就能解决这个问题了！出于定制考虑，这样写还是有那么一点必要的！)

 

代码篇幅，少了很多！现在我翻页轻松多了！！！