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()用于捕獲組件內部錯誤等等。