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

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

以上就是背景。

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

原本的定义:

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

特点

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

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

修改后的代码:

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

 结果

成功带出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM专题七:JVM垃圾回收机制

JVM专题六:JVM的内存模型中,我们介绍了JVM内存主要分哪些区域,这些区域分别是干什么的,同时也举了个例子,在运行过程种各个区域数据是怎样流转的。细心的小伙伴可能发现一个问题,在介绍完方法弹栈以后就没有…

指令微调数据集构建方法

指令微调(Instruction Tuning),是指使用自然语言形式的数据对预训练后的大语言模型进行参数微调,在一些文章中也称为有监督微调(Supervised Fine-tuning,SFT)或多任务提示训练(Multi…

go语言:两协程并发交替打印数字和字母(代码逐行注释)

要求: 并发两协程交替打印数字和字母。一个协程打印数字,一个协程打印字母。 输出: 12AB34CD56EF78GH910IJ1112KL1314MN1516OP1718QR1920ST2122UV2324WX2526YZ2728 思路: 两个 channel 控制两个协程进行交替打印。sync.WaitG…

CARLA自动驾驶模拟器基础

CARLA 使用服务器-客户端架构运行,其中 CARLA 服务器运行模拟并由客户端向其发送指令。客户端代码使用 API 与服务器进行通信。要使用 Python API,您必须通过 PIP 安装该模块: pip3 install carla-simulator # Python 3World and client 客…

【Android面试八股文】你能说一说View中onTouch、onTouchEvent和onClick的执行顺序吗?

文章目录 一、View中onTouch、onTouchEvent和onClick的执行顺序1.1 分析dispatchTouchEvent()1.1.1 执行顺序1.1.2 代码示例1.1.3 总结一、View中onTouch、onTouchEvent和onClick的执行顺序 要了解 onTouch()、onTouchEvent() 和 onClick() 方法的执行顺序,我们需要深入分析 …

React18中各种Hooks用法总结( 内附案例讲解)

React中各种Hooks用法总结 内附案例讲解 一、useState useState 是一个 React Hook,它允许你向组件添加一个 状态变量。 import React, { FC, memo, useState } from react import { MainContainer } from ./style interface IProps {children?: React.ReactNo…

FRP内网穿透及多级代理的使用

目录 0、前言 1、场景介绍 2、环境准备 2.1 下载frp 2.2 配置一台VPS 2.3 socks5客户端 2.5 网络环境准备 3、Frp设置 3.1 一层代理 3.1 二层代理 4、Frp总结 0、前言 FRP是比较老牌的也是比较流行的反向代理、内网穿透软件。FRP用途和使用场景可以看官方文档,…

JavaScript 预编译与执行机制解析

在深入探讨JavaScript预编译与执行机制之前,我们首先需要明确几个基本概念:声明提升、函数执行上下文、全局执行上下文以及调用栈。这些概念共同构成了JavaScript运行时环境的核心组成部分,对于理解代码的执行流程至关重要。本文将围绕这些核…

美团携手HarmonyOS SDK,开启便捷生活新篇章

华为开发者大会(HDC 2024)于6月21日在东莞松山湖拉开序幕,通过一系列精彩纷呈的主题演讲、峰会、专题论坛和互动体验,为开发者们带来了一场知识与技术的盛宴。6月23日,《HarmonyOS开放能力,使能应用原生易用…

如何在Java中实现数据加密与解密?

如何在Java中实现数据加密与解密? 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何在Java中实现数据加密与解密,这是保…

24-6-23-读书笔记(七)-《文稿拾零》豪尔赫·路易斯·博尔赫斯(第三辑)

文章目录 《文稿拾零》阅读笔记记录总结 《文稿拾零》 《文稿拾零》超厚的一本书(570),看得时间比较长,这本书是作者零散时间写的一些关于文学性质的笔记,读起来还是比较无趣的,非常零散,虽然有…

C++系列-String(二)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” #define _CRT_SECURE_NO_WARNINGS #include<string> #include<iostream> #include<list> #include<algorithm> using namespace std; void test_string…

【Android面试八股文】如果 onTouchEvent()方法返回false,onClick()方法还会执行么?

文章目录 一、onTouchEvent 返回 false 的情况二、示例场景分析三、结论在 Android 中,拦截事件通常指阻止事件继续传递或者消费事件,以防止它继续触发其他后续事件(比如 onClick())。 在 onTouchEvent() 方法中,如果返回 false,表示当前 View 没有处理该事件,Android …

Java启动jar设置内存分配详解

在微服务架构越来越盛行的情况下&#xff0c;我们通常一个系统都会拆成很多个小的服务&#xff0c;但是最终部署的时候又因为没有那么多服务器只能把多个服务部署在同一台服务器上&#xff0c;这个时候问题就来了&#xff0c;服务器内存不够&#xff0c;这个时候我们就需要对每…

Spring响应式编程之Reactor操作符

操作符 操作符Processo<T,R>&#xff08;1&#xff09;创建操作符&#xff08;2&#xff09;转换操作符&#xff08;3&#xff09;组合操作符&#xff08;4&#xff09;条件操作符&#xff08;5&#xff09;错误处理操作符 操作符Processo<T,R> 操作符并不是响应式…

【Python机器学习实战】 | 基于线性回归以及支持向量机对汽车MPG与自重进行回归预测

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

【Android面试八股文】请你描述一下JVM的内存模型

文章目录 JVM内存模型1. 方法区(Method Area)运行时常量池(Runtime Constant Pool)2. 堆(Heap)3. 栈(Stack)4. 本地方法栈(Native Method Stack)5. 程序计数器(Program Counter Register)6. 直接内存(Direct Memory)JVM内存溢出的情况Java的口号是: “Write onc…

【Flink metric】Flink指标系统的系统性知识:以便我们实现特性化数据的指标监控与分析

文章目录 一. Registering metrics&#xff1a;向flink注册新自己的metrics1. 注册metrics2. Metric types:指标类型2.1. Counter2.2. Gauge2.3. Histogram(ing)4. Meter 二. Scope:指标作用域1. User Scope2. System Scope ing3. User Variables 三. Reporter ing四. System m…

tensorRT C++使用pt转engine模型进行推理

目录 1. 前言2. 模型转换3. 修改Binding4. 修改后处理 1. 前言 本文不讲tensorRT的推理流程&#xff0c;因为这种文章很多&#xff0c;这里着重讲从标准yolov5的tensort推理代码&#xff08;模型转pt->wts->engine&#xff09;改造成TPH-yolov5&#xff08;pt->onnx-…

如何关闭软件开机自启,提升电脑开机速度?

如何关闭软件开机自启&#xff0c;提升电脑开机速度&#xff1f;大家知道&#xff0c;很多软件在安装时默认都会设置为开机自动启动。但是&#xff0c;有很多软件在我们开机之后并不是马上需要用到的&#xff0c;开机启动的软件过多会导致电脑开机变慢。那么&#xff0c;如何关…