vue页面methods里面方法太多解决

一、总结

一句话总结：

使用 【Mixin】（混入），然后再引入，很有效的减少了代码



var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"


 

 

1、敲代码的结构原则（页面代码量）？

一个页面中的【代码一定不要太多】，不然就太混乱了，可以【结构化的分几个文件】，这样结构非常清晰

 

 

二、vue页面methods里面方法太多解决

 

原则

一个页面中的代码一定不要太多，不然就太混乱了


尝试或的的做法是

1、使用 Mixin，然后再引入，很有效的减少了代码

但很坑的是如果别人来写，根本不知道你的引用的方法在哪个mixin文件中，一个一个找


2、都尽量用await，这样看起来代码都是平级的


3、分离出不需要this的函数

比如某个函数只有console.log(123), 那么就可以把这个单独出来放到页面最底部，或者另一个func.js文件中，然后再import进来

 

参考：vue页面methods里面方法太多，能否抽出一个方法文件？