vue实例在被创建之后会有自己的生命周期钩子函数，这些钩子函数包含了vue实例被创建前的数据观测阶段，将实例挂载到dom中，vue实例被更新以及被销毁的一整个过程。
让我们看看vue有哪些钩子函数，上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
</html>
<script type="text/javascript">
new vue({
el: "#app",
data:{
messsage: "hello vue.js"
},
//vue实例创建之前，数据观测和初始化事件还未开始
beforeCreate(){
console.log("vue实例创建之前")
}，
//vue实例创建，完成数据观测，初始化事件
created(){
console.log("vue实例被创建")
}，
//vue实例被挂载之前，调用此函数，首次调用render函数，实例完成部分内容，为挂载到HTML页面中
beforeMount(){
console.log("vue实例被挂载之前")
}，
//vue实例被挂载，实例中的HTML模板渲染到HTML页面中
mounted(){
console.log("vue实例被挂载")
}，
//vue实例更新之前，调用此函数，可更改组件的状态，但不会触发附加的重渲染过程
beforeUpdate(){
console.log("vue实例更新之前")
}，
//vue实例被更新，调用函数，DOM更新，执行依赖DOM的操作
updated(){
console.log("vue实例更新")
}，
//销毁前，实例销毁前调用，实例仍然可以使用
beforeDestroy(){
console.log("vue实例被销毁之前")
}，
//vue实例被销毁，移除所有监听函数，销毁所有的子组件
destroyed(){
console.log("vue实例被销毁")
}
}）
摘取图片一枚，以便理解
扫一扫
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
