<vue初体验> 基础知识 4、 vue的生命周期

系列导航

<vue初体验> 一、 vue的引入和使用体验

<vue初体验> 二、 vue的列表展示

<vue初体验> 三、 vue的计数器

<vue初体验> 四、 vue的生命周期

一、     效果

展示生命周期（不同生命周期的执行顺序）

 

二、代码结构

三、代码

04-Vue生命周期.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-Vue生命周期</title>
</head>
<body>

<div id="app">
  {{message}}
</div>

<script src="vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World'
    },
    beforeCreate() {
	    console.log('beforeCreate');
    },
    created() {
	    console.log('created');
    },
    beforeMount() {
	    console.log('beforeMount');
    },
    mounted() {
	    console.log('mounted');
    },
    beforeUpdate() {
	    console.log('beforeUpdate');
    },
	updated() {
		  console.log('updated');
	},
    beforeDestroy() {
	    console.log('beforeDestroy');
    },
    destroyed() {
	    console.log('destroyed');
    }
  })
</script>

</body>
</html>

 

四、代码解释

 

 

补充：

我们在创建Vue实例的时候，传入了一个对象options。

这个options中可以包含哪些选项呢？

查看文档：ps://cn.vuejs.org/v4/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

 

 

posted @ 2021-11-12 18:54  万笑佛  阅读(47)  评论(0)    收藏  举报