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

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里面方法太多，能否抽出一个方法文件？
https://segmentfault.com/q/1010000014383153