菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 组件生命周期-2023.06.25 [打印本页]

作者: 霁后彩虹O 时间: 2023-6-25 23:10
标题: 组件生命周期-2023.06.25
今日学习内容：

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组件

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)