生命周期函数就是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.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{message}}
<h2>常用的是8个生命周期函数</h2>
<p>
beforeCreate()
created()
beforeMount()
mounted()
beforeDestroy()
destroyed()
beforeUpdate()
upDated()
</p>
<h2>不常用的还有三个</h2>
<p>
activated()
deactivated()
errorCaptured: (err, vm, info)
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
message: 'hello wolrd'
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log(this.$el); // <div id="app"></div>
console.log('beforeMount');
},
mounted() {
console.log(this.$el); // <div id="app">'hello wolrd</div>
console.log('mounted');
},
beforeDestroy() {
console.log('beforeDestroy'); //需要执行：vm.$destroy()函数才能出发
},
destroyed() {
console.log('destroyed')；//需要执行：vm.$destroy()函数才能出发
},
beforeUpdate() {
console.log('beforeUpdate'); //需要更改data数据，才能出发（this.message = 'bye world'）
},
updated() {
console.log('updated'); //需要更改data数据，才能出发（this.message = 'bye world'）
},
})
</script>
</body>
</html>
网友评论