Vue 知识点分享

Question

data 声明的变量 不能以 _ 或者 $ 开头，Vue 不会将这些变量转化为响应式变量，且无法在实例上访问到该变量

// core/instance/state.ts
...
else if (!isReserved(key)) {
    proxy(vm, `_data`, key)
}
...

// core/util/lang.ts
export function isReserved(str: string): boolean {
  const c = (str + '').charCodeAt(0)
  return c === 0x24 || c === 0x5f
}

Vue router params 传参数无法正确获取

params 传参只能通过 name 标识路由，不能通过 path

this.$router.push({
    name: 'RouteName',
    params: {}
})

Loading chunk * failed

由于路由懒加载，切换页面时会加载对应的 chunk。发版后文件变化，导致无法正常加载对应的 JS，用户必须刷新页面才行。

解决办法： 增加路由守卫，记录跳转路由的路径到全局变量。然后劫持 console.error 方法。 webpack 懒加载失败时会用 console.error 打印信息

let isChunkError = false
export function fixLazyLoadChunkError() {
    const origin = console.error
    console.error = (error) => {
      if (/Loading chunk [^\s]+ failed/.test(error.message)) {
        if(isChunkError) return 
        isChunkError = true
        if(window.nextRoute) {
            const nextLocation = location.href.split('#')[0]+'#'+window.nextRoute
            location.href = nextLocation
            location.reload()
        }
      } else {
        origin(error);
      }
    }
}