vue noteBook

• 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`
}

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 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
  })