其他分享
首页 > 其他分享> > <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

 

 

标签：生命周期,E9%,log,Vue,vue,console,beforeCreate
来源： https://www.cnblogs.com/yclh/p/15545987.html