2022.10.17

1.开发中,涉及到引用类型的赋值操作,需要明确是深度赋值还是浅赋值

// 类似bject.assign的深度赋值方法
assignDeep() {
  const _this = this
  const args = Array.from(arguments)
  if (args.length < 2) return args[0]
  let result = args[0]
  args.shift()
  args.forEach(item => {
    if (_this.isPlainObject(item)) { // 如果item是对象
      if (!_this.isPlainObject(result)) result = {}
      for (const key in item) {
        if (_this.isPlainObject(item[key])) {
          result[key] = _this.assignDeep(result[key], item[key])
        } else if (item[key] instanceof Array) {
          result[key] = []
          item[key].forEach((ele, index) => {
            if (!_this.isPlainObject(ele)) {
              result[key][index] = ele
            }
            if (_this.isPlainObject(ele)) {
              result[key][index] = _this.assignDeep(result[key][index], ele)
            }
          })
        } else {
          result[key] = item[key]
        }
      }
    } else if (item instanceof Array) {
      if (!(result instanceof Array)) result = []
      item.forEach((arrItem, arrIndex) => {
        if (_this.isPlainObject(arrItem)) {
          result[arrIndex] = _this.assignDeep(result[arrIndex])
        } else {
          result[arrIndex] = arrItem
        }
      })
    }
  })
  return result
},

2.proxy代理跨域

1.假设你要调取的接口是 e.dxy.net/api/test，然后… localhost:8080/api/test，如axios.get('/api/test') 配置代理后，会做如下转发： localhost:8080/api/test -> e.dxy.net/api/test localhost:8080/bcma/api/test -> e.dxy.net/bcma/api/te…

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: true,        //如果要代理 websockets，配置这个参数
          secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
      }
  }
}

2.、当你调接口后端的命名没有统一给接口前加 /api 这类的标识，那么你可以自己加，也就是你可以在本地调 localhost:8080/api/test，如axios.get('/api/test')，而你要的目标接口是 e.dxy.net/test，你就可以用 pathRewrite，遇到 /api 就去找代理 e.dxy.net 并且把 /api 重写为 /。 所以转发效果就是： localhost:8080/api/test -> e.dxy.net/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: true,        //如果要代理 websockets，配置这个参数
          secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/api': '/'
          }
      }
  }
}

3、这个是对所有的接口都代理的，不止是检测到 /api 的接口，比如：
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/test -> http://e.dxy.net/test

devServer: {
 proxy: 'http://e.dxy.net'
}

4.在给vue组件添加原生时间的时候,需要加上.native修饰符才能生效,.native可以监听根元素的原生事件

5.vue路由二次进入页面,不执行created和mounted钩子函数解决方法

1.监听路由

watch: {
    $route(to) {
      if (to.path=='') {
        ...
      }
    }
},

2.使用keepalive标签包裹组件,每次进入组件会调用actived钩子函数

// 组件标签
 <keep-alive>
    <router-view/>
 </keep-alive>
 
 // 组件页面中
 activated() {
    ...
  },

3.可以使用组件内的路由当行守卫

6.computed在页面初始化的时候会执行一次,watch页面初始化时不会执行