vuejs 2 生命周期钩子函数

最新推荐文章于 2025-06-17 09:49:18 发布

weixin_30535913

最新推荐文章于 2025-06-17 09:49:18 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuezizhenchengxuyuan/p/6814360.html

本文通过一个简单的Vue实例，详细解析了Vue的生命周期钩子函数及其调用顺序。包括创建前、创建后、挂载前、挂载后等阶段，并展示了如何使用methods、watch及computed属性进行数据监听与计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 LifeCircle Hooks</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button style="border:1px red solid" @click="change_message">change message</button>
        <b>{{newMessage}}</b>
    </div>
     <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
     <script>
        var vue = new Vue({
            el:'#app',
            data:{
                message:'hello,world'
            },
            methods:{
                //用es6 语法省略:function
                change_message(){
                    this.message='I am changed'
                }
            },
            //life circle hooks
            beforeCreate:function(){
                console.log('=======before create')
                console.log(this.message)
                console.log(this.$el)
            },
            created:function(){
                console.log('=======created')
                console.log(this.message)
                console.log(this.$el)
            },
            beforeMount:function(){
                console.log('=======beforeMount')
                console.log(this.message)
                console.log(this.$el)
            },
            mounted:function(){
                console.log('=======mounted')
                console.log(this.message)
                console.log(this.$el)
            },
　　　　　　　//频繁调用
            beforeUpdate:function(){
                console.log('=======beforeUpdate')
                console.log(this.message)
                console.log(this.$el)
            },
　　　　　　　//频繁调用
            updated:function(){
                console.log('=======updated')
                console.log(this.message)
                console.log(this.$el)
            },
            beforeDestory:function(){
                console.log('=======beforeDestory')
                console.log(this.message)
                console.log(this.$el)
            },
            destoryed:function(){
                console.log('=======destoryed')
                console.log(this.message)
                console.log(this.$el)
            },
            watch:{
                message(newValue,oldValue){
                    console.log(oldValue + '==>' + newValue)
                }
            },
            computed:{
                newMessage(){
                    return this.message + ' balabala'
                }
            }
        })

        //另外一种写法 打印的顺序不一样 这个改变在中间
        // vue.$watch('message',function(newValue,oldValue){
        //     console.log(oldValue + '-->' + newValue)
        // })
     </script>
</body>
</html>