vue3.x 生命周期函数

 

注：实例环境 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控制台的变化