本文主要是介绍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}` }})
})
这篇关于Vue 初始化數組后操作另一個數組onMounted和watch的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!