created是Vue生命周期函數之一,用于在實例被創建時執行一些初始化操作。該函數只會調用一次,但是在一些情況下,我們希望created函數能夠被多次調用,本文就來探討一下這個話題。
在Vue實例中,created函數只會在實例被創建時調用一次。這個函數通常用于數據的初始化、事件的綁定等操作,但是有時候,我們需要在實例更新后重新初始化一些操作,比如說綁定一些需要動態更新的事件。此時,我們可以通過給Vue實例的$forceUpdate()方法添加一個標識符來實現created函數的多次調用。
mounted: function () { this.$forceUpdate('created-hook') }, created: function () { if(!this.$options.createdCalled) { this.$options.createdCalled = true; console.log('created executed'); } else { console.log('created executed again'); } }
具體來說,我們可以在Vue實例的mounted函數內使用$forceUpdate('created-hook')方法來觸發一次強制更新,在created函數內部通過判斷$option.createdCalled屬性的值來確定是否是第一次調用created函數。如果是第一次調用,則將$option.createdCalled屬性設為true,并執行正常的初始化操作;如果是第二次或者多次調用,則只執行一部分需要重新初始化的操作即可。
除了使用$forceUpdate方法之外,我們還可以通過Vue組件內部的$parent引用來實現created函數的多次調用。
mounted: function () { this.$parent.createdHooks && this.$parent.createdHooks.push(this.doSomething) }, created: function () { if(!this.$options.createdCalled) { this.$options.createdCalled = true; this.$parent.createdHooks = [this.doSomething]; console.log('created executed'); } else { console.log('created executed again'); this.$parent.createdHooks && this.$parent.createdHooks.forEach(hook =>hook()); } }, methods: { doSomething: function () { console.log('something happened'); } }
這種方法的原理是在Vue組件的mounted函數中將當前組件的doSomething函數綁定到它的父組件的createdHooks數組中,然后在當前組件的created函數中判斷$option.createdCalled屬性,并將createdHooks數組初始化為一個包含doSomething函數的數組。如果是第一次調用,則執行正常的初始化操作,并將當前組件的doSomething函數加入到createdHooks數組中;如果是第二次或者多次調用,則執行createdHooks數組中的所有函數。
綜上所述,created函數的多次調用需要使用$forceUpdate方法或者$parent引用來實現,如果你經常需要使用這種技巧,可能意味著你的Vue組件需要進行代碼重構了。