您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 生命周期

《和小米一起学Vue.js》— 生命周期

[ 孤狼 | 2022-07-28 23:51:36 | Vue | 1442°C | 0条评论 ]

上节已经说了如何运行一个独立页面版本的Vue程序。那么我们就要先来看看Vue程序的生命周期,了解一下代码到底运行了多少个步骤。[


每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

beforeCreate(创建前)

created(创建完成)

beforeMount(加载前)

mounted(加载后)

beforeUpdate(更新前)

updated(更新完成)

beforeDestroy(销毁前)

destroyed(销毁后)

不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。  

运行我们的 index.html 的代码来仔细看看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 生命周期</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="msg">
<div>{{num}}</div>
<button v-on:click="up">更新</button>
</div>
<script>
let ndata={num:'555'};
const v=new Vue({
el:"#msg",
data:ndata,
methods:{
up: function(){
console.log("执行更新");
this.num='999';
}
},
beforeCreate:function(){
console.log("创建前执行");
},
created:function(){
console.log("创建完成执行");
},
beforeMount:function(){
console.log('加载前执行');
},
mounted:function(){
console.log('加载后执行');
},
beforeUpdate:function(){
console.log('更新前执行');
},
updated:function(){
console.log('更新完成执行');
},
beforeDestroy:function(){
console.log('销毁前执行');
},
destroyed:function(){
console.log('销毁后执行');
}

});
</script>
</body>
</html>








转载请注明出处:http://gl.paea.cn/n.php?n=167
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索