开发过程中的踩坑

Posted by Youzi Blog on June 4, 2020

项目 踩坑

Vue 使用踩坑

主要针对 Vue2.0

Vue父子组件各生命周期触发顺序

结论：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

父beforeCreate
父created
父beforeMount

子beforeCreate
子created
子beforeMount
子mounted
父mounted

父beforeUpdate
子beforeUpdate
子updated
父updated

keep-alive的情况，多了个activated
子activated
父activated

父beforeDestroy
子beforeDestroy
子destroyed
父destroyed

问题：

页面keep-alive了，本来想从父组件用props传入到子组件，在各自的activated生命周期中更新了props，但在子组件中接收的时候，收到的还是旧的props，发现是因为子组件的生命周期优先触发导致的；

keep-alive的问题

整个页面路由包裹了keep-alive，正常来说应该内部的组件也会被缓存，现在遇到一个业务场景用到了v-if，此时发现用了v-if的组件不会触发activated生命周期，只会有created, mounted；

经过测试发现，当keep-alive的页面中，当前v-if的组件是false状态，则该组件的状态并不会被缓存，而且即使v-if变成了true状态，也不会触发activated生命周期。

关于组件的重新绘制和复用

我们都知道在使用数组或对象，对某些组件进行循环渲染时，Vue 会 warn 提示尽量写key，为啥呢，就是因为在重新渲染DOM的时候，会根据key来决定是否重新绘制一个新的组件；所以我们在动态增删被渲染的数组（对象）元素时，应该尽量保证已有节点的key是不变的，这样就不会触发旧节点的重新渲染，在保证渲染效率的同时，完成某些业务场景。

TypeError: Cannot read property ‘_wrapper‘ of undefined报错

  • 报错原因：在模板中，@click事件绑定的方法，在methods并不存在.
  • 解决方法: 检查绑定的@click是否在methods实现，只要在methods中存在即可。

遇到的情况是在渲染时不报错，在组件更新时报错，而且报的还是patchNode中的错误；迷的一批；

ES6 相关

async/await

遇到个使用上的问题，当 await 后面跟了个非 promise 对象时，就容易出问题，看下面的例子：

1
2
3
4
5
6

const f = async () => {
  // otherFunc返回的不是promise对象
  let tmp = await otherFunc();
  tmp;
  // Promise{status}
};

其实代码本意是拿到otherFunc的返回值做下一步操作，但是如果返回值本身不是thenable对象，这样拿到的值就是一个Promise了，所以尽量就别在不是异步函数的函数前加await关键字了。

ant-design-vue 框架踩坑

form 相关

  • validator这傻逼函数在方法内部不会报错；从而导致整个表单的validate失效，常见的问题有，内置校验器只会在console报错，不会在view层面体现，因为函数运行卡在了validator方法中，不会抛出异常（目前在 issue 里面看到的原因是因为校验函数必须调用callback方法，并且会一直等待callback方法被调用，如果内部报错了，很明显callback就不会正常被调用，导致校验器失效）

a-tree 相关

原生的树结构，需要注意一个坑；如果checkStrictly === true，会把子节点和祖先节点关联起来，通俗点说就是选择祖先节点了，它的子节点也会级联被选中，如果选择了子节点，会级联半选中祖先节点；第二种情况就会出现问题了，因为组件没有提供halfChecked，所以要自己手动定义个变量来保存这个半选中的值；有些时候这个半选中的值是有用的。像下面这张图中，其实节点0-0, 0-0-1是半选中状态的，但是没有提供props来获取，接着往下看；

关联树实例

  • 怎么保存半选中状态的值？考虑到从子节点的选中状态，反过来找父节点去判断是不是半选中，其实尝试了下太麻烦了，所以就用原生的事件来做了；

    • 监听@check，参数包括checkedKeys, e:{checked: bool, checkedNodes, node, event}，全选中的状态直接取第一个参数checkedKeys就行，是个数组；半选中状态在参数e.halfCheckedKeys中保存，也是个数组，你甚至在文档里都找不到这个数组。

    • 这样就会衍生出另一个问题，在设置defaultCheckedKeys时，只能设置全选中的节点，半选中的状态是自动生成的；但是如果不触发@check事件，就肯定得不到半选中的节点集合，所以其实建议是第一次保存checkedKeys时，把halfCheckedKeys也存储下来

scroll 事件踩坑

背景：项目用 Vue 全家桶，在组件内部 mounted 事件中，监听 scroll 事件，出现兼容性问题，scroll 事件仅会被触发一次，后续不再触发

解决：使用 jQuery 的监听方法，$(document).scroll(() =>{})

1
2
3
4

mounted: {
  window.addEventListener('scroll', () => {});
  $(document).scroll(() => {});
}

Vue-CLI v3 版本以上踩坑

vue serve

  • 先说问题，在目录下，我想做一个原型快速开发，但是用命令vue serve跑不起来，报错信息：
1
2
3

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError: missing ) after argument list

查了一堆资料，看issue：https://github.com/vuejs/vue-cli/issues/3148

另一个参考：https://github.com/vuejs/vue-cli/issues/3293

几乎都是一样的，yarn安装的全局路径，用了Windows powershell来运行项目，issue中提到，这是由于yarn的bug导致的，1.15版本后修复了，可是我目前的环境是1.22按理来说不会有问题的；

后来我决定重装所有的环境，注意我的步骤；

  1. uninstall @vue/cli, @vue/cli-service-global
  2. 用admin权限打开powershell，输入Set-ExecutionPolicy RemoteSigned；
  3. 先看看npm -v能不能运行会不会报错之类的，然后npm install -g yarn；
  4. 再试试yarn -v能不能运行，不行就重装，然后安装上面的两个依赖yarn global add @vue/cli @vue/cli-service-global；
  5. 完事以后vue -V测试一下，如果不行的话，要去环境变量里面，把yarn的全局路径配到环境变量里；
    • 检查yarn全局路径：yarn global dir，yarn global bin，可以看到全局包安装的路径；
    • 如果想改掉全局路径：yarn config set global-folder "D:\yarn\global"，全局cache路径：yarn config set cache-folder "D:\yarn\cache"
  6. 都搞完之后应该可以用vue serve命令了；

我是这么解决这个问题的，记录一下。

FEATURED TAGS
JavaScript webpack 项目配置 面试 npm JS CSS Vue 前端 react
FRIENDS