Vue-观察器（watch）的定义方式引发组件初始值没有渲染成功问题（已解决）

小牛同学_2024-06-20 20:58

问题描述：在测试环境发现一个问题，打开一张表单的时候，所有字段都成功赋上了值，唯独一个人员组件的值（出差人员）没有带出，而接口返回的数据是正常的，也就是说不是后端接口的问题，是前端组件渲染过程中出了差错。值得一提的是，出差人员这个字段是依据前面字段（"出版完成送出方式"）的值来动态生成的，只有其值为"出差人员带出"，那么"出差人员"这个字段才会生成。

以上就是背景。

在前端调试的过程中逐步发现，当代码走到给"出版完成送出方式"赋完值后，尽管后面的"出差人员"已经生成，但是代码却直接结束了，不给它赋值了。那么到这里问题可能就出在这个人员组件上了。查看人员组件的监听代码，发现：

原本的定义：

javascript 复制代码

watch: {  
    value: function () {  
        // ... 处理逻辑  
    }
},

特点：

value 观察器定义方式 ：在这里，value 的观察器直接是一个函数，而不是一个对象。这意味着这个观察器不会在组件创建后立即执行（除非 value 在创建后发生了变化）。

好了，知道问题所在，就修改：

修改后的代码：

javascript 复制代码

watch: {  
    value: {  
        handler() {  
            // ... 处理逻辑  
        },  
        immediate: true,  
    }
},

特点：

value 观察器定义方式 ：value 的观察器是一个对象，其中 handler 是处理函数，immediate: true 表示在组件创建后立即执行一次这个观察器（而不仅仅是当 value 变化时）。

差异总结

这两段代码都是 Vue 组件中的 watch 选项，用于观察特定数据属性的变化并执行相应的操作。但是，它们之间存在一些差异，主要是关于 value 的观察器（watch）的定义方式。

执行时机 ：第二段代码中，value 的观察器会在组件创建后立即执行一次（由于 immediate: true），而第一段代码中的 value 观察器则不会。
定义方式 ：第二段代码中，value 的观察器是一个对象，包含了 handler 函数和 immediate 选项；第一段代码中，value 的观察器直接是一个函数。

结果

成功带出。