8.15 笔记

知识点1 watch监听

watch(() => props.saleDialogVisible, () => {
  visible.value = props.saleDialogVisible?props.saleDialogVisible:false
})

watch函数可以接受三个参数

1. 监听数据类型
   1. ref对象
   2. reactive对象，会深度监听的，当内部任何一个改变，都会调用回调函数
   3. getter函数（就是一个箭头函数）
   4. 多个类型组成的数组
2. 回调函数
3. options(对象)
   1. {deep:true}：强制转为深度监听器
   2. {immediate:true}：因为watch是懒加载的，也就是只有当数据发生变化的时候，才会执行回调。这个是希望创建的时候就执行一次回调。一般用于，请求数据。

参考链接：

vue3中父子传值 defineProps和defineEmits用法 - 掘金

侦听器 | Vue.js

知识点2 onActivated

一般和<keep-alive>组件一起使用

触发时机：当keep-alive组件被插入到DOM中的时候，会被调用（首次挂载以及每次切换重新插入）

参考链接：

KeepAlive | Vue.js

知识点3

场景：

表单页面是一个公用组件，包括查看，修改和新建。我们通过是否具有表单id来判断当前表单是新增还是修改

系统登录以后，将用户的信息直接缓存在了vuex中，在表单页面初始化的时候，直接从vuex中获取信息。

但是存在一个问题，当你进行查看的时候，会先出现初始化的数据，然后才会出现获取到的数据。

解决方法：

1. 在ref里面写判断，判断是否存在id来进行不同的初始化

ref里面可以放表达式

const declareInfo = ref(useRoute().query.id?{
  title: ('国际物流报关申请-' + user.userName + '-' + dayjs().format("YYYY-MM-DD")),
  applicant: user.userName,
  applyDate: dayjs().format("YYYY-MM-DD"),
  department: user.departmentName,
  jobNumber: user.userAccount,
  fileList: [],
  status: '1',
  estimatedShipmentDate: '',
  requiredArrivalDate: ''
  }:{})

2. 利用a-spin,当数据获取到了，再去展示出来
   1. 在请求之前开启loading
   2. 在请求完成以后结束loading