vue之中watch监听不到defineProps第一次传输的值的问题

原创已于 2023-05-15 15:04:51 修改 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-05-15 14:50:26 首次发布

文章讲述了在Vue开发中遇到的一个问题，即子组件无法监听到父组件通过defineProps传递过来的visible属性的初始值。作者发现Vue的props传递是异步的，导致watch可能错过第一次的值。通过在watch选项中添加immediate:true，可以确保watch立即触发回调，从而获取到props的初始值，成功解决了问题。

问题：在子组件内监听父组件使用defineProps传输过来的visible，但是监听不到第一次传输得值

问题解决：发现这个问题之后，我首先查看defineProps传值是否正常，显示是为正常的，否则弹窗也无法有效的打开关闭，后来我在watch里面添加immediate:true立即触发回调函数，这样就使watch能够监听到第一次的值

watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      formState.task_name = props.newBuiltType + "_" + props.newBuiltTime;
    }
  },
{immediate:true}
);

原因总结：vue之中props传值是异步更新的，这就导致watch可能会监听不到第一次的值，需要使用watch里面的immediate，以便于watch能够立即触发回调函数得到监听的值的变化，这样就不会被异步所影响而监听不到。