当前位置: 首页 > news >正文

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}` }})
})

相关文章:

  • 单体项目-动态上下文问题
  • 蓝桥杯宝藏排序题目算法(冒泡、选择、插入)
  • 制作自己的 Docker 容器
  • 家校互通小程序实战开发02首页搭建
  • ARM GIC(四) gicv3架构基础
  • ModuleNotFoundError: No module named ‘tensorflow‘
  • 【华为OD题库-107】编码能力提升计划-java
  • 出现 Error:Unable to access jarfile xxxx\target\nacos-server.jar 解决方法
  • 芯科科技以卓越的企业发展和杰出的产品创新获得多项殊荣
  • Apache Flink 进阶教程(七):网络流控及反压剖析
  • SpringSecurity6 | 登录失败后的JSON处理
  • vue3项目 - 使用 pnpm 包管理器来创建项目
  • Power BI 学习
  • 直接插入排序【从0-1学数据结构】
  • Django 简单图书管理系统
  • CentOS 7 修改主机名
  • ES6核心特性
  • JavaScript异步流程控制的前世今生
  • JS笔记四:作用域、变量(函数)提升
  • js递归,无限分级树形折叠菜单
  • KMP算法及优化
  • leetcode讲解--894. All Possible Full Binary Trees
  • Linux Process Manage
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 前端设计模式
  • 写代码的正确姿势
  • 学习笔记TF060:图像语音结合,看图说话
  • 一道闭包题引发的思考
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • (1)常见O(n^2)排序算法解析
  • (二)linux使用docker容器运行mysql
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现
  • (力扣)1314.矩阵区域和
  • (算法)前K大的和
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • (转)visual stdio 书签功能介绍
  • (转载)VS2010/MFC编程入门之三十四(菜单:VS2010菜单资源详解)
  • (转载)深入super,看Python如何解决钻石继承难题
  • .NET 5种线程安全集合
  • .NET C#版本和.NET版本以及VS版本的对应关系
  • .net on S60 ---- Net60 1.1发布 支持VS2008以及新的特性
  • .net 无限分类
  • .py文件应该怎样打开?
  • 。Net下Windows服务程序开发疑惑
  • @GetMapping和@RequestMapping的区别
  • @拔赤:Web前端开发十日谈
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • [ 英语 ] 马斯克抱水槽“入主”推特总部中那句 Let that sink in 到底是什么梗?
  • [8-27]正则表达式、扩展表达式以及相关实战
  • [BZOJ] 2044: 三维导弹拦截
  • [C# 开发技巧]如何使不符合要求的元素等于离它最近的一个元素
  • [cogs2652]秘术「天文密葬法」
  • [Docker]十一.Docker Swarm集群raft算法,Docker Swarm Web管理工具
  • [Fri 26 Jun 2015 ~ Thu 2 Jul 2015] Deep Learning in arxiv