工作中见过的bug

最新推荐文章于 2021-11-03 08:00:00 发布

原创最新推荐文章于 2021-11-03 08:00:00 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了Vue中form表单button导致的页面刷新问题，解析了button默认行为及如何阻止，默认submit行为的原理与解决方案。同时介绍了Vue中$nextTick的用法，以及如何在组件中使用/deep/深度选择器使样式对所有子组件生效。

1点击form 表单中的button导致页面刷新问题

原因分析：

在form表单里的button，不给button添加type属性，点击按钮，button的类型会默认为submit，会默认提交表单并刷新页面。

将input或者button的type属性改为button，点击按钮页面就不会自动重新加载了。

2nextTick

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

3/deep/ 深度选择器。

vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。

4使用vetur插件格式化代码，换行太多

在setting.json文件中加上如下配置

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typ=script",
"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
 },