文章目錄
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
Vue.js 是一個基于 MVVM 模式的前端框架,它的核心是一個響應式的數據綁定系統。在 Vue.js 中,組件是一個可復用的 Vue 實例,它擁有自己的生命周期鉤子函數,用于在組件生命周期的不同階段執行一些特定的邏輯。下面通過例子介紹一下常見的 Vue 組件生命周期:

beforeCreate
beforeCreate():在實例被創建之初執行的函數。在這個鉤子函數中,可以進行一些初始化的操作,例如初始化數據、注入組件等等。該函數執行時,Vue實例的數據觀測和事件配置都還沒有被設置,所以不能訪問實例的this屬性,也不能訪問DOM元素。
<template><div>{{ message }}</div>
</template><script>
export default {beforeCreate() {console.log('beforeCreate')this.message = 'Hello, Vue!'},created() {console.log('created')},data() {return {message: ''}}
}
</script>
示例中,beforeCreate鉤子函數中設置了message屬性的值為’Hello, Vue!'。在created鉤子函數中,可以看到這個屬性已經被設置,所以可以將其渲染到模板中。
注意:beforeCreate鉤子函數只會在實例被創建之初執行一次,之后不會再執行。如果需要在實例更新之前進行一些操作,可以使用beforeUpdate鉤子函數。
created
created():在實例被創建之后立即執行。在這個鉤子函數中,可以進行一些初始化的操作,例如獲取數據、設置計算屬性等等。在這個鉤子函數被執行時,Vue實例已經完成了數據觀測和事件配置,但還沒有開始DOM編譯和掛載,所以仍然不能訪問DOM元素。
<template><div>{{ message }}</div>
</template><script>
export default {created() {console.log('created')this.getMessage()},data() {return {message: ''}},methods: {getMessage() {// 獲取數據的方法this.message = 'Hello, Vue!'}}
}
</script>
示例中,created鉤子函數中調用了getMessage方法來獲取數據并設置了message屬性的值。在模板中,可以看到這個屬性已經被渲染出來了。
注意:created鉤子函數只會在實例被創建之后執行一次,之后不會再執行。如果需要在實例更新之后進行一些操作,可以使用updated鉤子函數。
beforeMount
beforeMount():在實例掛載之前執行。在這個鉤子函數中,可以對模板進行一些編譯和渲染前的操作。在這個鉤子函數被執行時,Vue實例已經完成了數據觀測和計算屬性的計算,但還沒有開始DOM編譯和掛載。
<template><div ref="myDiv">{{ message }}</div>
</template><script>
export default {beforeMount() {console.log('beforeMount')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}}
}
</script>
示例中,beforeMount鉤子函數中設置了myDiv元素的顏色為紅色。在模板中,可以看到這個顏色已經被應用到了渲染出來的元素中。
注意:beforeMount鉤子函數只會在實例掛載之前執行一次,之后不會再執行。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。
mounted
mounted():在實例掛載之后立即執行。在這個鉤子函數中,可以對模板進行一些操作,例如訪問DOM元素、使用第三方插件等等。在這個鉤子函數被執行時,Vue實例已經完成了DOM編譯和掛載,所以可以訪問DOM元素。
<template><div ref="myDiv">{{ message }}</div>
</template><script>
export default {mounted() {console.log('mounted')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}}
}
</script>
示例中,mounted鉤子函數中設置了myDiv元素的顏色為紅色。在模板中,可以看到這個顏色已經被應用到了渲染出來的元素中。
注意:,mounted鉤子函數只會在實例掛載之后執行一次,之后不會再執行。如果需要在實例更新之后進行一些操作,可以使用updated鉤子函數。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。
beforeUpdate
beforeUpdate():在數據更新之前立即執行。在這個鉤子函數中,可以進行一些數據更新前的操作,例如獲取更新前的DOM信息等等。在這個鉤子函數被執行時,Vue實例已經完成了數據的計算和渲染,但還沒有開始DOM重新渲染。
<template><div>{{ message }}</div>
</template><script>
export default {beforeUpdate() {console.log('beforeUpdate')},data() {return {message: 'Hello, Vue!'}},methods: {updateMessage() {this.message = 'Hello, World!'}}
}
</script>
示例中,定義了一個updateMessage方法,用于更新message屬性的值。在點擊按鈕之后,message屬性的值將會被更新,并且beforeUpdate鉤子函數會被執行。
注意:beforeUpdate鉤子函數只會在數據更新之前執行一次,之后不會再執行。如果需要在數據更新之后進行一些操作,可以使用updated鉤子函數。
updated
updated():在數據更新之后立即執行。在這個鉤子函數中,可以對更新后的DOM進行操作,例如獲取更新后的DOM信息等等。在這個鉤子函數被執行時,Vue實例已經完成了數據的計算和渲染,也完成了DOM重新渲染。
<template><div ref="myDiv">{{ message }}</div><button @click="updateMessage">Update Message</button>
</template><script>
export default {updated() {console.log('updated')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}},methods: {updateMessage() {this.message = 'Hello, World!'}}
}
</script>
示例中,定義了一個updateMessage方法,用于更新message屬性的值。在點擊按鈕之后,message屬性的值將會被更新,并且updated鉤子函數會被執行。在updated鉤子函數中,將myDiv元素的顏色設置為紅色。
注意:updated鉤子函數只會在數據更新之后執行一次,之前不會執行。如果需要在數據更新之前進行一些操作,可以使用beforeUpdate鉤子函數。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。
beforeDestroy
beforeDestroy():在實例銷毀之前立即執行。在這個鉤子函數中,可以進行一些實例銷毀前的操作,例如清除定時器、取消事件監聽等等。
<template><div>{{ message }}</div><button @click="destroy">Destroy Instance</button>
</template><script>
export default {beforeDestroy() {console.log('beforeDestroy')// 清除定時器、取消事件監聽等等},data() {return {message: 'Hello, Vue!'}},methods: {destroy() {this.$destroy()}}
}
</script>
示例中,定義了一個destroy方法,用于銷毀Vue實例。在點擊按鈕之后,beforeDestroy鉤子函數會被執行。
注意:beforeDestroy鉤子函數只會在實例銷毀之前執行一次,之后不會再執行。如果需要在實例銷毀之后進行一些操作,可以使用destroyed鉤子函數。
destroyed
destroyed():在實例銷毀之后立即執行。在這個鉤子函數中,可以進行一些實例銷毀后的操作,例如清除定時器、取消事件監聽等等。
<template><div>{{ message }}</div><button @click="destroy">Destroy Instance</button>
</template><script>
export default {destroyed() {console.log('destroyed')// 清除定時器、取消事件監聽等等},data() {return {message: 'Hello, Vue!'}},methods: {destroy() {this.$destroy()}}
}
</script>
示例中,定義了一個destroy方法,用于銷毀Vue實例。在點擊按鈕之后,destroyed鉤子函數會被執行。
注意:destroyed鉤子函數只會在實例銷毀之后執行一次,之前不會執行。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。
另外,Vue.js還提供了其他一些生命周期函數,如activated()和deactivated()用于處理組件的激活和非激活狀態,errorCaptured()用于捕獲組件內部錯誤等等。