vue技巧大解密

782 阅读1分钟

Vuex的替代方案;

  • Vuex不好之处
    1、引起不必要的体积;
    2、引起复杂的管理麻烦;

  • 替代方案

  • 1、bus
    全局注册一个bus

//index.js
Vue.prototype.bus = new Vue();

通过$emit触发事件

//App.vue
this.bus.$emit('change','我是传递过去的参数')

在需要监听以上事件的组件中的mounted中监听

//HelloWorld.vue
 mounted(){
        this.bus.$on('changeDep',(msg)=>{
            this.msg = '由App.vue点击图片触发'+msg;
        })
  },

原理:利用vue自带的观察者模式进行事件监听;

缺点:
1、每次都要触发事件,监听事件,管理起来麻烦;
2、Vue.prototype.bus = new Vue();这种写法不优雅;

  • 2、简易store

创建一个myStore.js

import vue from 'vue';
export const store = vue.observable({a:123});
export const mutations = {
    changeDep(msg){
        store.a = msg;
    }
}
//HelloWorld.vue
 computed:{
      a(){
          return store.a;
      }
  }

打包优化

1、减少resolve、限制include;
2、dll原理;
3、happypack;

  • 插件解决项目问题
    为什么需要插件?
    提供你的全局自定义操作。
    项目中总会有项目的一些特殊需求,插件就是为了我们解决这些需求的。它可以注入到每个组件的生命周期,然后自动做某些事情。

  • 需求:项目vuex过大(比如vuex中几百个数据,最后打包结果会进入app.js),导致打包结果过大
    处理:按组件异步拆分加载vuex

目录

插件编写

var obj = {
    install:function(vue){
        vue.mixin({
            created:function(){
                if(this.$options.isVuex){
                    var name = this.$options.name;
                    //动态import就是懒加载,不会和app.js打包到一起
                    import('../store/modules/'+name).then((res)=>{
                        this.$store.registerModule(name,res.default);
                    });
                }
            }
        })
    }
}
module.exports = obj;

模块中的内容,如store/modules/HelloWorld.js中内容:

export default{
    state:{
        number1:1
    }
}

这样动态引入以后,在访问HelloWorld.vue时候可以拿到模块的内容