vue的生命周期

最新推荐文章于 2022-10-31 10:18:26 发布

FavoriteStudent

最新推荐文章于 2022-10-31 10:18:26 发布

阅读量200

点赞数

文章标签： vue 生命周期钩子函数

本文链接：https://blog.csdn.net/FavoriteStudent/article/details/80811171

版权

为了更好的学习vue，理解vue的生命周期是很有必要的，vue的生命周期主要包含8个钩子函数，我们分析一下这8个钩子函数所做的事情就能够理解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生命周期</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'Vue的生命周期'
        },
        beforeCreate(){
            console.group('------创建前------')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        },
        created(){
            console.group('----创建后-----')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        },
        beforeMount(){
            console.group('-----挂载前-----')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        },
        mounted(){
            console.group('----挂载后----')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        },
        beforeUpdate(){
            console.group('----更新前----')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        },
        updated(){
            console.group('----更新后----')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        },
        beforeDestroy(){
            console.group('----销毁前----')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        },
        destroyed(){
            console.group('----销毁后----')
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.message)
            console.groupEnd()
        }
    })
</script>
</html>

运行后打开控制台打印内容如上图所示

beforeCreate：el和data并未初始化

created：data数据的初始化，而el没有

beforeMount：完成了el和data的初始化

mounted：完成挂载

注意：在beforeMount时，并未将data中的数据渲染在浏览器上，这里先占位，在mounted挂载的时候再把值渲染进去

update

我们在控制台输入命令

vm.message = '123'

然后就能看到data里的值被修改后，将会触发update的操作

destroy

完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，如果没有必要，请不要使用destroy

例如：在控制台输入vm.$destroy()

再改变message的值，就无效了

总结：

beforeCreate:类似于ajax的beforeSend，可以加Loading

created:可以结束loading，可以做一些初始化，实现函数自执行

beforeMount:可以用于监听

mounted:可以在这操作dom

beforeDestory：监听销毁前的操作

destroyed:销毁后，没啥好操作的，弹个提示框吧

FavoriteStudent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的生命周期

为了更好的学习vue，理解vue的生命周期是很有必要的，vue的生命周期主要包含8个钩子函数，我们分析一下这8个钩子函数所做的事情就能够理解vue的生命周期了先贴一段代码吧，可以直接新建一个网页，在浏览器上运行，打开控制台查看结果&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&...
复制链接

扫一扫