编程教育资源分享平台

网站首页 > 后端开发 正文

Vue生命周期各阶段都有哪些变化?

luoriw 2024-01-31 12:30:23 后端开发 11 ℃ 0 评论

Vue中共有8个生命周期钩子,看看它们在初始化实例的过程中,都干了些什么事情。

生命周期

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>生命周期</title>
 <script src="vue.js"></script>
</head>
<body>
<div id="box">
 <p id="para">{{msg}}</p>
</div>
</body>
</html>
<script>
 var vm = new Vue({
 el:'#box',
 data:{
 msg:'word'
 },
 beforeCreate:function(){
 console.log('beforeCreate---------------创建前');
 //vue实例本身自带一些属性:$el、$data
 console.log('el:'+this.$el);
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 },
 created:function(){
 console.log('created--------------------创建完成');
 console.log('el:'+this.$el);
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 },
 beforeMount:function(){
 console.log('beforeMount----------------挂载前');
 console.log('el:'+this.$el); //占位
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 var para = document.getElementById('para').innerText;
 console.log('para:'+para);
 },
 mounted:function(){
 console.log('mounted--------------------挂载完成');
 console.log('el:'+this.$el);
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 var para = document.getElementById('para').innerText;
 console.log('para:'+para);
 },
 beforeUpdate:function(){
 console.log('beforeUpdate---------------更新前');
 console.log('el:'+this.$el); //控制台更改msg数据
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 var para = document.getElementById('para').innerText;
 console.log('para:'+para);
 },
 updated:function(){
 console.log('updated--------------------更新完成');
 console.log('el:'+this.$el);
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 var para = document.getElementById('para').innerText;
 console.log('para:'+para);
 },
 beforeDestroy:function(){
 console.log('beforeDestroy---------------销毁前');
 console.log('el:'+this.$el);
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 },
 destroyed:function(){
 console.log('destroyed-------------------销毁完成');
 console.log('el:'+this.$el);
 console.log('data:'+this.$data);
 console.log('msg:'+this.msg);
 }
 })
</script>

打印结果



初始阶段



更新阶段



销毁阶段

友情提示:

vm实例销毁,只是清理它与其它实例的连接,解绑它的全部指令及方法;它并不是用来清除已有页面上的DOM的。

比如:调用 vm.$destroy()之后,你会发现,vm.msg= 'test destroy' 不会对页面产生影响。即页面的内容仍旧是hello

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言