vue3使用时的常用问题整理

chenzhaozheng
260 阅读2分钟

1. emit的使用场景

子组件执行父级组件的方法

2. vue-tsc的使用场景

  • 使用 vue-tsc 可以在命令行中执行相同的类型检查，通常用来生成单文件组件的 d.ts 文件。

3. 常用工具整理

4. 组件缓存的使用时机

5. Vue-loader的作用

为 webpack 提供 Vue SFC 支持的官方 loader。如果你正在使用 Vue CLI，也可以看看如何在 Vue CLI 中更改vue-loader选项的文档。

6.
  • 预处理为组件的setup()函数，这意味着它将为每一个组件实例都执行？顶层的绑定都将暴露给模板。

7. 自定义指令的使用场景

不推荐在组件上使用自定义指令。vue官方文档的解释在于

只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。其他情况下应该尽可能地使用 v-bind 这样的内置指令来声明式地使用模板，这样更高效，也对服务端渲染更友好。

8. defineProps与defineEmits的使用场景

使用<script setup>的时候，可以使用来获取props和emits绑定事件。

9.withDefaults

针对类型的defineProps声明不足之处在于，没有给props提供默认值的方式。为了解决这个问题，提供withDefaults编译器宏。提供对默认值的类型检查，确保返回的props的类型删除了除了已声明的默认值的属性的可选标志。

10. 关于Pinia的使用

状态管理库

11.关于Vitest、Cypress的使用，案例

// 模拟登录
describe('AutoComplete Problem', () => {
  const baseUrl = 'xxxxxxx';

  it('Login Operate', () => {
    cy.visit(baseUrl + '/setting/admin-user');

    cy.get('.min-w-64 > .ant-btn').click();
    cy.get(
      'form[style=""] > :nth-child(1) > .ant-col > .ant-form-item-control-input > .ant-form-item-control-input-content > #form_item_username',
    )
      .clear()
      .type('chenzhaozheng');
    cy.get(
      'form[style=""] > :nth-child(2) > .ant-col > .ant-form-item-control-input > .ant-form-item-control-input-content > .ant-input-affix-wrapper > #form_item_password',
    )
      .clear()
      .type('123456');
    cy.get('.ant-form-item-control-input-content > .ant-btn').click();
    cy.wait(500);
    cy.get('.vben-header-user-dropdown__name').contains('chenzhaozheng');
  });
});

12. monorepo是什么意思？

单一代码库

xie.infoq.cn/article/4f8…

13. lodash与lodash-es

lodash是默认的commonjs版本

lodash-es是lodash的es modules版本，体积更小

avatar
文章
阅读
粉丝