Vue学习计划-Vue2--VueCLi(七)nextTick、、浏览器本地缓存、脚手架配置代理

1. nextTick

  1. 语法: this.$nextTick(回调函数)
  2. 作用:在下一次DOM更新结束后执行其指定的回调
  3. 什么时候用: 当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行
    **举个栗子:App.vue组件内: **

运行效果:

总结:

  1. 第一个输出的值cxt1为旧值
  2. 第二个输出的值是updated生命周期内的值cxt3
  3. 第三个输出的使$nextTick内的值cxt2
  4. 若是想要在更新数据后操作dom元素可以在updated内写操作方法或者在$nextTick,但是由于updated钩子会在每次更新后都会被调用,哪怕是更改了一个和count无关的数据也会触发,所以当想要改变count后操作dom元素,可以使用$nextTick

2. 浏览器本地缓存WebStorage

  1. 存储内容大小一般支持5M左右(不同浏览器可能还不一样)
  2. 浏览器端通过window.sessionStorage window.localStorage属性来实现本地存储机制
  3. 相关API:xxxxStorage指sessionStorage/localStorage
    1. xxxxStorage.setItem('key', 'value'):该方法接收一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
    2. xxxxStorage.getItem('key'):该方法接收一个键名作为参数,返回键名对应的值。
    3. xxxxStorage.removeItem('key'):该方法接收一个键名作为参数,并把该键名从存储种删除。
    4. xxxxStorage.clear():该方法会清空存储中的所有数据。
  4. 备注:
    1. sessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. localStorage存储的内容,需要手动清除才会消失。
    3. xxxxStorage.getItem('key')如果对应的value值获取不到,那么getItem的返回值是null
    4. JSON.parse(null)的结果依然是null
      图示:

3.vue脚手架配置代理

  1. 方法一
    1. vue.config.js中添加下配置:

      devServer: {
      proxy: "http://xxxxx"
      }

    2. 说明

      • 优点: 配置简单,请求资源时直接发给前端即可
      • 缺点:不能配置多个代理,不能灵活控制请求是否走代理
      • 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)
  2. 方法二
    1. 编写vue.config.js配置具体代理规则:

      proxy: {
      "/api": { // 匹配所有以'/api'开头的请求
      target: 'https://xxx1:5000', // 代理目标的基础路径
      ws: true, // webSocket
      changeOrigin: true,
      pathRewrite: { // 是否重写路径
      [^/api]: ''
      },
      },
      "/api2": {
      target: 'https://xxx2'
      ws: true,
      changeOrigin: true,
      }
      }
      // changeOrigin为true时,服务器收到的请求头中的host为:https://xxx1: 5000
      // changeOrigin为false时,服务器收到的请求头中的host为:https://xxx1:8080
      // changeOrigin默认为true, 其实就是欺骗服务器,是否是跨域

相关推荐
佳腾_几秒前
【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断
前端·中间件·性能优化·tomcat·web应用服务器
brzhang4 分钟前
告别 CURD,走向架构:一份帮你打通任督二脉的知识地图
前端·后端·架构
*TQK*8 分钟前
线性代数——行列式⭐
笔记·学习·线性代数
Moment11 分钟前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
兜小糖的小秃毛13 分钟前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
兜小糖的小秃毛13 分钟前
文号验证-同时对两个输入框验证
开发语言·前端·javascript
brzhang14 分钟前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
bxlj_jcj15 分钟前
如何实现Redis和Mysql中数据双写一致性
redis·缓存·架构
J总裁的小芒果21 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星22 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js