Recording

__Learn gsc-font-vue

querystring(查询字符串)

  • 提供用于解析和格式化 URL 查询字符串的实用工具

eventHub

  • eventHub可以用来让全局组件之间进行通信 在入口文件main.js中
  • Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue()

eventBus

Vue-ls

一个Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage

__一个vue封装的本地储存的方法。

  • 全局使用: Vue.ls

  • 上下文使用: this.$ls

  • 常用API:

    • Vue.ls.get(name,def) 返回storage中 name值。在返回之前，内部解析JSON中的值

      • def参数 默认为null 如果没有设置name 则返回该默认值def

  • Vue.ls.set(name,value,expire)

    • 在storage设置name的value 并将value 转化为JSON

      • expire 默认为null name的有效时间 以毫秒为单位

    • Vue.ls.remove(name)

      • 从storage 中移除 name, 返回布尔值 成功true

  • Vue.ls.clear()

    • 清除storage

    • Vue.ls.on(name,callpack)

      • 持续监听name在其他标签上的改变,当发生改变时触发callback 传递如下参数
      • newValue: 当前storage中 name , 从持久化的JSON中解析
        • oldValue: 旧的storage中 name , 从持久化的JSON中解析
      • url: 修改来自选项卡的URL

    • Vue.ls.off(name, callback)

      • 删除以前的监听器

Vue.use 和 Vue.protype.$xxx

全局方法Vue.use()需要在new Vue()前完成

实际上Vue.use(Plugin) 内部是调用了一个install方法 Plugin.install(Vue) install方法实际上就是在Vue.prototype上添加了方法 在调用 Vue.use 时，它的内部方法 是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Vue.use = function (plugin) {
  if (plugin.installed) {
    return;
  }
  // additional parameters
  var args = toArray(arguments, 1);
  args.unshift(this);
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args); /所以实际上 就是调用了install方法
  } else {
    plugin.apply(null, args);
  }
  plugin.installed = true;
  return this;
};

一个简单的install 方法： 

1
2
3
4
5
6
7
8
9
10
11
12
// 创建一个简单的插件 say.js
var install = function(Vue) {
  if (install.installed) return // 如果已经注册过了，就跳过
  install.installed = true

  Object.defineProperties(Vue.prototype, {
    $say: {
      value: function() {console.log('I am a plugin')}
    }
  })
}
module.exports = install

Vue.use() 一般用于初始化要使用的插件对象

Vue.prototype 用于不污染全局作用域的情况下在原型上定义方法 并且可以被实例使用

Vue.directive

__自定义指令 [Vue.directive( id, [definition] )]

  • 全局注册 Vue.directive 
1
2
3
4
5
6
7
8
// 注册一个全局自定义指令 `v-focus`
   Vue.directive('focus', {
     // 当被绑定的元素插入到 DOM 中时……
     inserted: function (el) {
       // 聚焦元素
       el.focus()
     }
   })

  • 局部注册

    • 组件中接受一个directives 的选项：

      • 如：
1
2
3
4
5
6
7
8
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

  • Vue.directives 中的钩子函数 (都是可选的)

    • bind: 只调用一次 指令第一次绑定到元素时调用,可以进行一次性初始化设置
    • inserted: 被绑定元素插入父节点时调用
    • update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
    • componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind: 只调用一次，指令与元素解绑时调用。

  • 钩子函数的参数

    • el 指令绑定的元素
    • binding name:指令名 value:指令的绑定值 arg：传给指令的参数
    • vnode 生成的虚拟节点

activated deactivated

___使用 包裹动态组件时，会缓存不活动的组件实例， 而不是销毁他们，和相似， 是一个抽象组件，他不会自身渲染一个DOM元素，也不会出现在父组件链中。

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

并且只有组件在内被切换，才有 activated 和 deactivated

git

git checkout -b dev origin/dev这个命令

它意思是说.切换到dev分支上,接着跟远程的origin地址上的dev分支关联起来,这里要注意origin代表是一个路径,可以用git remote -v 查看

vscode的一个好用插件 ：gitLens

Vue proxy

使用公司框架时对Vue proxy处理跨域的学习：

  • 在proxy文件中导出一个数组 proxyUrl 数组中存的是一些对象，对象中有以下属性
    • proxyName: 代理对象名
    • target： 默认添加不同模块名 当replace存在时 target为全路径
    • replaceTarget ： 一个布尔类型 控制target
    • alias 别名 当处于不同服务下 使用该属性
  • 在vue.config.js中将根据proxyUrl生成的数组proxyArr 传入到一个生成代理的函数中
    • 该函数返回一个proxyObj 赋 给了devServer中的proxy

Vue slot

___官方文档目前提到 在vue2.6以后使用v-slot来代替实现具名插槽和作用域插槽

对于作用域插槽的理解：子组件可以给父组件传参，父组件来决定怎么展示数据，这与具名插槽不同 具名插槽需要在父组件中传数据 以及 定义样式。

vue2.6以后的使用方式：

具名插槽

1
2
3
<template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

作用域插槽

1
2
3
4
5
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

请求数据问题

一般在vue的created的生命周期中实现向后台发送请求数据 但是如果我想要每次进入页面的时候都从后台获取数据就不能用created事件来实现

我的实现方案是用watch属性监听路由的变化 当路由发生变化发送请求可以做到即时响应

路由

  • 路由使用history模式 BeforeRouteUpdate守卫会失效。

  • 路由跳转页面重新渲染

    • provide/inject方式

      • 在App.vue中 的router-view 判断isRouterAlive

  • provide()中返回一个reload 目的是在需要reload方法的界面使用inject[‘reload’]可以注入依赖

    • 在App.vue的methods中定义reload方法 
      1
      2
      3
      4
      this.isRouterAlive=false
      this.$nextTick(function(){
          this.isRouterAlive = true
      })

  • 组件注入依赖以后直接使用this.reload()方法

！！

两个叹号相当直接将非布尔类型值转为布尔类型值

v-decorator

使用antdv中的form表单

使用antdv去获取表单的数据是使用 v-decorator 的方式去给每个项注册 ,这样才能通过组件去拉取表单的数据 同时对必填项做校验

defaultValue 和v-decorator 不能混用

浏览器缓存

async/await

await等待await后面的代码执行完再往下执行

await后面的代码要return promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

async await 的阻塞只在该函数的作用域中有效

Vue中使用echarts

实习中有在vue框架中使用echarts的需求 但是echarts官网提供的是用原生js方式实现功能

[Documentation - Apache ECharts(incubating)](https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts)

因为官方提供的是原始的js交互方式 但是在使用vue开发时 我们很少会直接对DOM操作 原生不太符合vue开发习惯 所以使用vue-echarts 该依赖对获取元素进行了封装

  • 首先安装Echarts 和 vue-echarts npm install echarts vue-echarts

antdv 的一些tips

  • antdv获取表单value 可以使用getFiledValue方法
  • 为antdv中的select设置默认值可以使用 v-decorator 中的initialValue
  • 抛出全局信息错误 this.$message.error

Vue-i18n

vue实现前端国际化的插件 采用{{$t( )}}的方式使用

测试dist打包文件

1、npm install -g serve(全局安装)
2、打包命令： 查看 package.json 中的打包命令：
3、打包后生成dist的包后 serve -s dist(运行打包后的文件)
4、手机输入IP端口直接也可以测试