<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
// 生命周期函数就是 Vue实例在某一个时间点自动执行的函数
var vm = new Vue({
el : "#app",
template : "<div>{{message}}</div>",
data : {
message : "hello world"
},
// vue实例基础初始化之后，就会触发
beforeCreate : function(){
console.log("beforeCreate");
},
created : function(){
console.log("created");
},
// 如果没有template模板，就会将el内的当成模板
// 如果有template，就会用template里的东西
// beforeMount：当和模板结合，在渲染页面之前的一瞬间，执行beforeMount函数（还没有渲染到页面上————用模板的情况下）
beforeMount : function(){
console.log(this.$el);
console.log("beforeMount");
},
// 这时候hello World就会渲染在页面上了
// mounted就会自动执行（已经渲染了）
mounted : function(){
console.log(this.$el);
console.log("mounted");
},
// 实例还没有销毁，在销毁的前一刻
// 销毁实例：vm.$destroy()
beforeDestroy : function(){
console.log("beforeDestory");
},
// 实例被销毁了
destroyed : function(){
console.log("destoryed");
},
// 数据发生改变，还没渲染之前
beforeUpdate : function(){
console.log("beforeUpdate");
},
// 数据改变，渲染之后
updated : function(){
console.log("updated");
}
})
</script>
</body>
</html>vue的生命周期函数
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
