1.beforeCreate --创建前
触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件
2.created --创建后
触发的行为：vue实例的数据对象data有了，$el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备
3.beforeMount --渲染前
触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
在此阶段可以做的事情：。。。
4.mounted --渲染后
触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用
5.beforeUpdate --更新前
触发的行为：data更新时触发
在此阶段可以做的事情：。。。
6.updated —更新后
触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7.beforeDestroy —销毁前
触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁
8.destroyed —销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示
用钩子函数实现小球动画
代码：
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag=!flag">
<!-- 使用transition元素 把小球包裹起来 -->
<transition
@before-enter="bforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
flag:false
},
methods:{
bforeEnter(el){
el.style.transform="translate(0,0)"
},
enter(el,dona){
el.offseWidth
// 表示都动画之后的样式 可以设置小球完成动画的结束状态
el.style.transform="translate(150px,450px)"
el.style.transform="all is ease"
dona()
},
afterEnter(el){
this.flag=this.flag
}
}
})
</script>
</body>
引入css样式：
<script src="./js/vue.js"></script>
<style>
.ball{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
效果：点击
