前端学习之路——大佬才能看懂篇

745 阅读3分钟

image.png

1. 报错问题类

1.1 为什么这个照片所在的详情页在刷新进来的时候就会有这个点击事件呢???

image.png

1.2 当出现找不到数据的报错提示之后,可能是 解决

  • image.png

  • image.png

2. 关于修改配置问题————增加代码提示

在这个文件夹下面

image.png

里面的这部分代码的意思是:disabled 不提示(也就是没有代码提示了)

image.png

当在文件里面,加上这个配置之后,就会有代码提示了

image.png

3. 小技巧类

3.1 如果要在组件里面嵌套另一个小的组件,就需要将外层的组件转换成双标签的。

3.2 当遇到的数据类型复杂的时候,可以将每个模块拆分出来(分成组件),例如 detailStore 这里面存灭个组件里面的数据,后面再service文件夹里面调用接口,然后就可以直接在页面里面使用了

image.png

3.3 数据管理的两种方式 一种实在 store里面存数据 另外一种是直接在页面中加载

3.4 抽取复杂数据类型的时候,可以用计算属性 (detailInfos 对象里面包括 mainPart 对象)

image.png

  • 关于网络请求获取数据的技巧(res 直接得到的数据结构混乱,定义一个新的变量,更有序) image.png

  • 抽取 detailInfos 对象里面包括 mainPart 对象 image.png 上面的写法错误,要记得.value 之后才正确:

    image.png

3.5 关于设置空对象可能导致的问题

image.png

  • 可以通过 运算符解决 image.png

  • 可以通过设置v-if 当有值的时候,才会显示true

    image.png

4. 知识点讲解类

4.1 关于文件导出
export * from "./modules/home" 是一种 ES6(ECMAScript 2015)模块导出方式,用来将 "./modules/home" 模块中的所有导出内容重新导出。具体来说,它有以下几个含义:

a. 导出模块中的所有内容

这段代码会将 ./modules/home.js 文件中通过 export 导出的所有内容(无论是命名导出还是默认导出)重新导出到当前模块中。

b. * 表示导出所有内容

  • * 是一个通配符,表示“导出所有东西”。如果 ./modules/home.js 文件中有多个导出(例如命名导出),那么这些导出都会被重新导出。
  • 它的作用相当于“批量导出”文件中所有的命名导出。

c. 实际效果

  • 如果 ./modules/home.js 中有这样一些导出:

    // ./modules/home.js
    export const name = "Home";
    export const version = "1.0";
    export function greet() {
      console.log("Hello from Home");
    }
    

    那么,export * from "./modules/home" 就相当于在当前模块中做了如下导出:

    // 当前文件
    export { name, version, greet } from "./modules/home";
    

    所以,其他文件如果导入当前文件,实际上就能拿到 home.js 中所有的命名导出内容:

    // 其他文件
    import { name, version, greet } from './currentModule';
    
    console.log(name);  // "Home"
    console.log(version);  // "1.0"
    greet();  // "Hello from Home"
    

4. 不会导出默认导出

需要注意的是,export * from 只会导出 命名导出,而不会导出默认导出。如果 ./modules/home 中有默认导出,默认导出不会被重新导出。

例如,如果 home.js 中有这样的默认导出:

// ./modules/home.js
export default function home() {
  console.log("Welcome to Home");
}

那么 export * from "./modules/home" 不会重新导出这个默认导出,除非你显式地将它导出:

// 当前文件
export { default } from "./modules/home";

或者单独导出默认内容:

// 当前文件
export { default as home } from "./modules/home";

总结

export * from "./modules/home" 会将 ./modules/home.js 中的所有命名导出(而非默认导出)重新导出,方便其他文件引入并使用这些导出的内容。