零散经验

设置默认值

当用户操作后才设置某个状态的默认值，不要采用 watch 的方式
v-mode可以拆分成 :value 和 @input

联动列表数据

当某个状态改变时，使用计算属性重新计算获取列表数据，不要采用状态改变后修改数据的方式

is

is可以指定为一个浏览器原生标签的名称

<component is="h1"></component>

style scoped

会在最后生成的 css 选择器的最后加上属性选择器

<style scoped lang="scss">
.hello {
  .cs {
    color: red;
  }
}
</style>

// 生成的 css
.hello .cs[data-v-469af010] {
  color: red;
}

页面容器组件

页面容器组件是指含有侧边菜单栏、导航栏等的公共组件，一般用于做为所有页面的公共容器
不要在嵌套路由中使用它，而是作为每个页面的组件进行引用，让页面的内容嵌套在这个组件中
这样有利于根据每个页面的业务不同对页面容器组件进行定制化

页面路由管理

应该把页面按功能分为功能块，每个功能文件夹下包含对应的路由
- 在route.js中引用组件时更容易写路径（使用相对路径）
  - 别名需要jsconfig.json或tsconfig.json配置，后者的优先级高于前者
  - 不过即时使用相对路径引用了组件，能够通过路由跳转到组件定义中，但根据组件export default反查定义时依然不包括路由文件。
    - 即使引入的是js文件，也无法通过定义反向查到import()的引用
    - 这可能是因为import()本来就属于动态导入，路径可能是拼接的，无法通过定义反向查到引用它的js。
- 功能块的路由信息和页面的相关性较强点，和应用的整体路由关系反而较弱
- 页面和路由整合在一个文件夹中，对功能块进行整体迁移也更加方便
- 每个功能块都有一个和文件夹名称相同的前缀，来避免它和别的路由相冲突，这个前缀还运用于路由的name和组件名上，建议这个前缀使用常量定义，其他地方根据这个常量拼接生成
  - 组件name建议以前缀+组件文件名生成，来保证不会重复
    - 组件名在组件缓存中会被使用到，不重复能避免可能存在的错误
    - 组件文件名使用-连接的多个单词，vetur能够提供自动引入
  - 路由name建议以前缀+生成，后续随意，保证同一个功能块内不重复即可

文件结构

- src
  - router.ts
  - views
    - order-foren
      - common.ts
      - detail-vue.vue
      - list-vue.vue
      - logistics-vue.vue
      - route.ts

detail-vue.vue

<template>
  <div>detail<input v-model="inputText" /></div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { prefix } from "./common";

export default defineComponent({
  name: `${prefix}-detail-vue`,
  setup() {
    const inputText = ref("");
    return { inputText };
  },
});
</script>

弹窗组件和中间页面

弹窗组件一般作为某个行为的中间过程，封装弹窗组件的open方法返回一个promise，会时整个代码流更容易理解
- 中间页面也是相同道理

局部状态

显然 provide/inject 比 vuex 等更适合作为局部状态

跨页面参数传递

优先级 vue-router 中 params > query > 总线
- params 和 query 都是持久化的，params还支持在面包屑路由中传递到父级

v-for生成多项

如果生成的项顺序不会改变，建议在template中手写所有项，然后用v-if来控制显隐，而不是用v-for动态生成。这样更容易扩展

数组

只拦截了数组的部分方法来触发watch
数组项为对象时和普通对象的触发机制相同
- 修改数组项的某个属性会触发
- 增加数组项的某个属性不会触发

封装method，比如节流方法

在created中对method进行赋值，避免this的指向出错

render

当前组件插槽的内容改变，当前组件render函数不会重新运行
vue3中传入的prop改变，render函数一定会被运行。vue2好像不会

posted on 2023-12-01 09:27 噬蛇之牙阅读(14) 评论(0) 收藏举报