专业的编程技术博客社区

网站首页 > 博客文章 正文

Vue生命周期各阶段都有哪些变化?（vue生命周期的含义）

baijin 2024-10-09 07:57:15 博客文章 9 ℃ 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：

猜你喜欢

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

欢迎 你 发表评论:

最近发表
标签列表