今日学习内容：
1.生命周期函数
生命周期函数是一些钩子函数（回调函数），在某个时间会被Vue源码内部进行回调；
通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段；
那么我们就可以在该生命周期中编写属于自己的逻辑代码了；
生命周期钩子 = 生命周期函数 = 生命周期事件
## 生命周期三个阶段
三大阶段：初始化显示、更新显示、销毁==Vue实例==
vue框架内置了不同时刻的生命周期函数，生命周期函数会伴随组件的运行而自动调用。
2. 初始化阶段的钩子函数：
beforeCreate() 实例创建前：数据和模板均未获取到
==**created() 实例创建后**: **最早可访问到 data 数据，但模板未获取到**==
beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上。
==mounted() 数据挂载后：数据已挂载到模板中==
### 更新阶段的钩子函数：
**beforeUpdate() 模板更新前**：data 改变后，更新==数据模板前==调用
**updated()模板更新后**：将 data 渲染到数据模板中
### 销毁阶段的钩子函数：
**beforeDestroy() 实例销毁前**
**destroyed() 实例销毁后**
### activated和deactivated
当配合vue的内置组件 <keep-alive> ⼀起使⽤的时候,才会调⽤下⾯此⽅法
<keep-alive> 组件的作⽤它可以缓存当前组件
activated() {
console.log('组件被激活了');
},
deactivated() {
console.log('组件被停⽤了');
},
# Vue特殊特性ref
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取
3. ref使用
1.在需要获取的元素上添加ref属性. 例如: <p ref="mypp">我是段落</>
2.在使用的地方通过 this.$refs.xxx获取, 例如 ==this.$refs.myppp==
## ref特点
ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件
4.Transition组件的原理
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
1.自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；
2.如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；
3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；
transition注意点:
transition中只能放一个元素, 多个元素无效
如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件
|
