vue noteBook

2019-05-08 本文已影响0人嚎鹰_Y飞翔

Object.defineProperty()不支持数组需单独处理

proxy() 视图会刷新两次兼容性差

let proxy = new Proxy(source,handler);
let handler ={
    get(targer,key){
        if(typeof target[key] == 'object' && target[key] !== null){
            return new Proxy(target[key],handler)
        }
        return Reflect.get(target,key)
     },
    set(target,key,value){
        if(key == 'length') return true;
        return  Reflect.set(target,key,value)
    }
}

input 防止复用input标签上添加元素 key=唯一值即可

directives指令

  directives:{
       name:{
          bind(el){},
          inserted(el){},//元素插入到页面执行
          update(el){}//值改变时执行
      }
  }

compouted 基于Object.defineProperty 有缓存不支持异步
watch 支持异步 immediate 组件一加载则执行
str.startWith("v-") 字符串以什么开头(es6)

vue.config.js不支持import 基于node

    let path = require("path");
    module.exports={
        // 基本路径
        publicPath: '/',
        //打包后把js css image图片存放于此文件夹下
        assetsDir:'asserts',
        //打包所有文件存放地址
        outputDir:'dist',
        //是否使用template模板 mian.js文件中 cli3 默认是render函数
        runtimeCompiler:false,
        //打包时是否需要.map 文件
        productionSourceMap:false,
        chainWebpack: config => {
            //可以获取到原有webpack配置 增加一些自己的逻辑
            config.resolve.alise.set("name",path.resolve(__dirname,'src')),//别名
            
         },
        configureWebpack: config => {
              plugins:[],
              module:{}
        },
        devserver:{
            port: 80,//端口号
            open: true, //配置自动启动浏览器
            proxy:{
                '/name': {
                    target: 'http://40.00.100.100:3002', //别忘了加http
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': '' //这里理解成用‘/api’代替target里面的地址，比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
                    }
                }
            }
        },
       // 第三方插件配置 把如下样式挂到全局
       pluginOptions: {
            'style-resources-loader': {
                preProcessor: 'less',
                patterns: [
                   path.resolve(__dirname, "src/assets/css/toolcss_mixin.less")
                ]
            }
        }
    }

组件类型：全局组件局部组件函数式组件异步组件（路由分割）
组件传参：props emit vuex v-bind=$attrs v-on=$listenner
requestAnimationFrame(callback)浏览器自带动画
cancelAnimationFrame(timer) 取消动画
v-model ===> input(){}+:value的结合
.sync修饰符 父子组件数据同步
路由钩子

//全局前置守卫
beforeEach(ro,from,next){}
//全局后置钩子
afterEach((to,from)=>{})
//路由独享的守卫()挂路由上
beforeEnter:(to,from,next)=>{}
//组件内的守卫
beforeRouteEnter(to,from,next){
  // 不能获取组件实例 `this` 
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}
//(2.2 新增)
beforeRouteUpdate (to,from,next){
  // 可以访问组件实例 `this`
}
beforeRouteLeave (to, from, next){
  // 可以访问组件实例 `this`
}

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

vuex 源码

function forEach(obj,callback){
  Object.keys(obj).forEach(item=>callback(item,obj[item]))
}
function installModule(store,rootState,path,rootModule){
  if(path.length > 0){
     let parent =  path.slice(0,-1).reduce((root,current)=>{
      return root[current]
    },rootState)
    //vue 动态设置值
    Vue.set(parent,path[path.length-1],rootModule.state)
  }
  if(rootModule._raw.getters){
     forEach(rootModule._raw.getters,(getterName,getterFn)=>{
        Object.defineProperty(store.getters,getterName,{
          get :()=>{
            return getterFn(rootModule.state)
          }
        })
    })
  }
  if(rootModule._raw.actions){
     forEach(rootModule._raw.actions,(actionsName,actionsFn)=>{
      //store.actions[actionsName]有值则用自己 没定义/没值时则定义并赋值(空数组)
         let entry = store.actions[actionsName]||(store.actions[actionsName]=[]);
         entry.push(()=>{
           actionsFn.call(store,store)
         })
      })
  }
  if(rootModule._raw.mutations){
      forEach(rootModule._raw.mutations,(mutationsName,mutationsFn)=>{
         let entry = store.mutations[mutationsName]||(store.mutations[mutationsName]=[]);
         entry.push(()=>{
            mutationsFn.call(store,rootModule.state)
         })
      })
  }
  forEach(rootModule._children,(childName,module)=>{
      installModule(store,rootState,path.concat(childName),module)
  })
}
let Vue;
let install=(_Vue)=>{
    Vue = _Vue;//保留vue构造函数
    Vue.mixin({
      beforeCreate () {
        //根组件
        if(this.$options&&this.$options.store){
          this.$store = this.$options.store;
        }else{//子组件
          this.$store = this.$parent && this.$parent.$store;
        }
      }
    })
}
class ModuleCollection{
    constructor(options){
      this.register([],options);
    }
    register(path,rawModule){
        let newModule={
            _raw:rawModule,//当前模块 state getters对象
            _children:{},//包含的模块
            state:rawModule.state //自己模块的状态
        }
      if(path.length == 0){
          this.root = newModule;//根
       }else{
              let parent = path.slice(0,-1).reduce((root,current)=>{
                return root._children[current]
              },this.root)
              parent._children[path[path.length -1]] =newModule
      }
      if(rawModule.modules){
          forEach(rawModule.modules,(childName,module)=>{
              this.register(path.concat(childName),module)
          })
      }
  }
}
class Store {
    constructor(options){
      let state = options.state;
      this.getters={};
      this.mutations= {};
      this.actions={};
      //vuex核心 借用object.defineProperty
      this._vm=new Vue({
          data:{
             state
          }
      });
    //模块直接的关系整理
    this.modules=new ModuleCollection(options);
    installModule(this,state,[],this.modules.root)
     /* if(options.getters){
           let getters = options.getters;
           let mutations = options.mutations;
           let actions = options.actions;
          forEach(getters,(getterName,getterFn)=>{
              Object.defineProperty(this.getters,getterName,{
              get:()=>{
                return getterFn(state)
              }
            })
        })
          forEach(mutations,(mutationName,mutationFn)=>{
            this.mutations[mutationName]=()=>{
                mutationFn.call(this,state)
            }
          })
        forEach(actions,(actionsName,actionsFn)=>{
           this.actions[actionsName]=()=>{
             actionsFn.call(this,this)
            }
        })
  }*/
      let {commit,dispatch}=this;
      //实例方法
      this.commit=(type)=>{
        //此处查找原型上的
        commit.call(this,type)
      }
       //实例方法
      this.dispatch=(type)=>{
        //此处查找原型上的
        dispatch.call(this,type)
       }
    }
    get state(){
      return this._vm.state
    }
    //原型上的
    commit(type){
      this.mutations[type].forEach(fn=>fn())
    }
    //原型上的
    dispatch(type){
      this.actions[type].forEach(fn=>fn())
    }
}
export default({
  install,
  Store
})

vue noteBook

猜你喜欢

热点阅读