Vue 初始化數組后操作另一個數組onMounted和watch

Vue 的父组件和子组件的生命周期钩子函数执行顺序可以归类为以下 4 部分:

1、加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount  -> 子 beforeCreate  -> 子 created -> 子beforeMount -> 子 mounted -> 父 mounted

注意:mounted 不会保证所有的子组件也都被一起挂载。如果希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick

2. 父组件更新过程

父 beforeUpdate -> 父 updated

3. 子组件更新过程

父 beforeUpdate -> 子 beforeUpdate  -> 子 updated -> 父 updated

4. 销毁过程

父 beforeDestroy -> 子 beforeDetroy -> 子 destroyed -> 父 destroyed

https://www.cnblogs.com/bala/p/15884167.html

解決方案1

 通過鈎子函數操作,前提是emailAddArr 已經有數據。

所以typescript需要定義emailAddArr為全局變量,這樣會在第一時間賦值。

const emailAddArr = ref([] as string[])在函數前定義export function useEmailSent() {                    
onMounted(() => {list.value = emailAddArr.value.map((item) => {elHelper.alertBox(item + '')return { emailValue: `${item}`, emailLabel: `${item}` }})
})

解決方案二

這個方案是最合理的

watch(emailAddArr.value, () => {list.value = emailAddArr.value.map((item) => {elHelper.alertBox(item + '')return { emailValue: `${item}`, emailLabel: `${item}` }})
})

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

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

相关文章

深度剖析:Golang中结构体方法的高级应用

深度剖析:Golang中结构体方法的高级应用 引言结构体方法的基础回顾结构体的定义和用法方法的定义和绑定基本语法和用法 高级特性与应用封装、继承和多态方法集与接口的关系结构体方法的匿名字段和嵌入结构体 性能优化与最佳实践接收器类型的选择:指针还是…

文档 - - - Docsify文档创建

目录 1. Docsify 介绍2. 创建 Docsify 项目2.1 安装 Node.js2.1 安装 docsfiy-cli2.3 初始化项目2.4 运行项目2.5 使用 Python 运行项目(扩展,不推荐有bug) 3. 配置 Docsify 项目3.1 修改等待加载文字3.2 添加网站 ico 图标3.3 创建新页面写文…

Redux与React环境准备、实现counter(及传参)、异步获取数据

环境说明: 一:说明 在React中使用redux,官方要求安装两个其他插件:Redux Toolkit和react-redux 1. Redux ToolKit(RTK) - 官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式 (简化…

【数据结构之单链表】

数据结构学习笔记---003 数据结构之单链表1、什么是单链表?1.1、概念及结构 2、单链表接口的实现2.1、单链表的SList.h2.1.1、定义单链表的结点存储结构2.1.2、声明单链表各个接口的函数 2.2、单链表的SList.c2.2.1、遍历打印链表2.2.2、销毁单链表2.2.3、打印单链表元素2.2.4…

跨域问题的解决

1.什么是跨域? 浏览器从一个域名的网页去请求另外一个域名的资源时,域名、端口或者协议不同都是跨域 2.跨域的解决方案 设置CORS响应头∶后端可以在HTTP响应头中添加相关的CORS标头,允许特定的源(域名、协议、端口)访问资源。S…

VM进行TCP/IP通信

OK就变成这样 vm充当服务端的话也是差不多的操作 点击连接 这里我把端口号换掉了因为可能被占用报错了,如果有报错可以尝试尝试换个端口号 注: 还有一个点在工作中要是充当服务器,要去网络这边看下他的ip地址 拉到最后面

【github】github设置项目为私有

点击setting change to private 无脑下一步

day6 力扣公共前缀--go实现---对字符串的一些思考

今日份知识: curl -x 指定方法名 请求的url -d 请求体body里面的内容 //curl命令 curl -x Get 127.0.0.1:8080/add/user -d jinlicurl如果不指定方法,默认使用get方法,在go里面,get方法到底可以不可以把内容数据写在body里面传…

web架构师编辑器内容-创建业务组件和编辑器基本行为

编辑器主要分为三部分,左侧是组件模板库,中间是画布区域,右侧是面板设置区域。 左侧是预设各种组件模板进行添加 中间是使用交互手段来更新元素的值 右侧是使用表单的方式来更新元素的值。 大致效果: 左侧组件模板库 最初的模板…

基于JSP+Servlet+Mysql的调查管理系统

基于JSPServletMysql的调查管理系统 一、系统介绍二、功能展示1.项目内容2.项目骨架3.数据库3.登录4.注册3.首页5.系统管理 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称:基于JSPServlet的调查管理系统 项目架构:B/S架构 开发语言&#…

在Next.js和React中搭建Cesium项目

在Next.js和React中搭建Cesium项目,需要确保Cesium能够与服务端渲染(SSR)兼容,因为Next.js默认是SSR的。Cesium是一个基于WebGL的地理信息可视化库,通常用于在网页中展示三维地球或地图。下面是一个基本的步骤,用于在Next.js项目中…

群组推荐模型---SoAGREE(Social-Enhanced Attentive Group Recommendation)

SoAGREE 概要方法Hierarchical Attention Network LearningAttentive User Representation Learning NCF(Neural Collaborative Filtering) 概要 此论文是在AGREE(Attentive Group Recommendation)模型上的进一步增强,有兴趣的朋友可以去看上一篇博客讲述的就是AGR…

.raw 是一个 Anndata 包中的对象,用于存储原始的单细胞数据。scanpy种如何查看 .raw 对象的内容,

1查看 .raw 对象的内容,可以使用以下方法: .raw 是一个 Anndata 包中的对象,用于存储原始的单细胞数据。 使用 .X 属性查看原始数据矩阵:.raw.X 这将返回一个 Numpy 数组,其中包含原始数据的数值。 使用 .var_names 属…

nodejs微信小程序+python+PHP兴趣趣班预约管理系统设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

ARM作业1

汇编实现三个灯闪烁 汇编代码&#xff1a; .text .global _start _start: 设置GPIOE,GPIOF时钟使能LDR R0,0X50000A28 LDR R1,[R0] ORR R1,R1,#(0x3<<4) STR R1,[R0] 设置PE10,PF10,PE8为输出 LED1LDR R0,0X50006000LDR R1,[R0]ORR R1,R1,#(0X1<<20)BIC R1…

力扣每日一题day38[106. 从中序与后序遍历序列构造二叉树]

给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7], postorder [9,15,7,20,3] 输出&#xff1a;[…

华为鸿蒙(HarmonyOS):连接一切,智慧无限

华为鸿蒙是一款全场景、分布式操作系统&#xff0c;旨在构建一个真正统一的硬件生态系统。该操作系统于2019年8月首次发布&#xff0c;并被设计为可以应用于各种设备&#xff0c;包括智能手机、智能手表、智能电视、车载系统等多种智能设备。 推荐一套最新版的鸿蒙4.0开发教程 …

从零开发短视频电商 在AWS上SageMaker部署模型自定义日志输入和输出示例

从零开发短视频电商 在AWS上SageMaker部署模型自定义日志输入和输出示例 怎么部署自定义模型请看&#xff1a;从零开发短视频电商 在AWS上用SageMaker部署自定义模型 都是huaggingface上的模型或者fine-tune后的。 为了适配jumpstart上部署的模型的http输入输出&#xff0c;我…

python一点通: 一文讲清Post 和 Put操作区别!

当我们使用网络服务时&#xff0c;如果我们不能小心地区分 POST 和 PUT&#xff0c;有时可能会触发错误。 在 Web 开发世界中&#xff0c;特别是在处理 RESTful API 时&#xff0c;HTTP 方法 POST 和 PUT 经常被使用&#xff0c;但常常被误解。这两者都用于向服务器发送数据&a…

Java设计模式之单例模式以及如何防止通过反射破坏单例模式

单例模式 单例模式使用场景 ​ 什么是单例模式&#xff1f;保障一个类只能有一个对象&#xff08;实例&#xff09;的代码开发模式就叫单例模式 ​ 什么时候使用&#xff1f; 工具类&#xff01;&#xff08;一种做法&#xff0c;所有的方法都是static&#xff0c;还有一种单…