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