vue生命周期钩子函数

Posted jinsuo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue生命周期钩子函数相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <h1>生命周期，构字函数</h1>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="add">add</button></p>
        <p><button onclick="unbind()">解绑销毁</button></p>
    </div>
</body>
<script type="text/javascript">
        function unbind(){
            app.$destroy();
        }
    var app=new Vue({
        el:"#app",
        data:{
            count:1,
        },
        methods:{
            add:function(){
                this.count++
            }
        },
        beforeCreate:function(){
            console.log("beforeCreate  初始化之前")
        },
        created:function(){
            console.log("created  创建完成")
        },
        beforeMount:function(){
            console.log("beforeMount  挂载之前  ")
        },
        mounted:function(){
            console.log("mounted  被挂载之后")
        },
        beforeUpdate:function(){
            console.log(‘beforeUpdata  数据更新前‘)
        },
        updated:function(){
            console.log(‘ updated  被更新后‘)
        },
        beforeDestroy:function(){
            console.log(‘beforeDestroy 销毁之前‘)
        },
        destroyed:function(){
            console.log(‘destroyed 销毁之后‘);
        }

    })
    //就是Vue实例从创建到销毁的过程，就是生命周期。
</script>
</html>

 

以上是关于vue生命周期钩子函数的主要内容，如果未能解决你的问题，请参考以下文章

Vue——生命周期和钩子函数的一些理解

Vue 生命周期钩子函数

Vue笔记（Vue生命周期 11个钩子）

vue3生命周期及生命周期函数（钩子函数）详解通俗易懂

vue实例的生命周期 —— 钩子函数

Vue生命周期钩子---2