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

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

以上就是背景。

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

原本的定义:

javascript 复制代码
watch: {  
    value: function () {  
        // ... 处理逻辑  
    }
},

特点

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

好了,知道问题所在,就修改:

修改后的代码:

javascript 复制代码
watch: {  
    value: {  
        handler() {  
            // ... 处理逻辑  
        },  
        immediate: true,  
    }
},

特点

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

差异总结

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

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

结果

成功带出。

相关推荐
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法