注：例項環境 vue cli構建的專案

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
        <h3>{{title}}</h3>
        <button @click="total++">總數自增</button> 總數：{{total}}
    </div>
</template>

<script>

    export default {
        name: "Example",
        data: function () {
            return {
                title: '生命週期函式',
                total:0
            }
        },
        beforeCreate: function () {
            console.log('beforeCreate執行了...');
        },
        created: function () {
            console.log('created執行了...');
        },
        beforeMount: function () {
            console.log('beforeMount執行了...');
        },
        mounted: function () {
            console.log('mounted執行了...');
        },
        beforeUpdate: function () {
            console.log('beforeUpdate執行了...');
        },
        updated: function () {
            console.log('updated執行了...');
        },
        beforeUnmount: function () {
            console.log('beforeUnmount執行了...');
        },
        unmounted: function () {
            console.log('unmounted執行了...');
        }
    }
</script>

<style scoped>
</style>
 

重新整理瀏覽器並點選按鈕看看console控制檯的變化