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 的观察器直接是一个函数。

结果

成功带出。

相关推荐
m51277 分钟前
LinuxC语言
java·服务器·前端
运维-大白同学29 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴2 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript