4-vue的生命周期（钩子函数）

钩子函数：程序在运行过程中任何发生变化时，比如开始、进行中之类的节点，可以使用钩子函数在这些节点的时候做一些事情。

vue有10个钩子函数（生命周期）：

4-vue的生命周期（钩子函数）

相关代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-v-on 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js" ></script>
</head>
<body>
    <h1>比赛积分器</h1>

    <div id='ele'>  
        <p>本场比赛得分：<span v-text="count"></span></p>

        <p>
            <button @click="AddScore">加分</button>
        </p>
        <p>
            <button onclick="app.$destroy()">销毁</button>
        </p>
    </div>

    <script>
    
      var app =  new Vue({
           el:"#ele",
           data:{
               count:1,
           },
           methods:{
               AddScore:function(){
                   this.count++;
               }
           },

           //10个钩子函数
           beforeCreate:function(){
                console.log('1-beforeCreate 初始化之前');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被创建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }
        })
    </script>

</body>
</html>

4-vue的生命周期（钩子函数）

相关推荐