vue2怎么用requestAnimationFrame
时间: 2024-05-23 18:08:17 浏览: 16
在Vue2中,我们可以使用`requestAnimationFrame`来优化一些重绘的操作,从而提升页面的性能。具体使用方法如下:
1. 在需要使用`requestAnimationFrame`的组件中引入:
```javascript
import { requestAnimationFrame, cancelAnimationFrame } from 'raf';
export default {
// ...
}
```
2. 在`mounted`生命周期函数中使用`requestAnimationFrame`:
```javascript
mounted() {
this.rafId = requestAnimationFrame(this.draw);
}
```
3. 在`beforeDestroy`生命周期函数中使用`cancelAnimationFrame`取消动画:
```javascript
beforeDestroy() {
cancelAnimationFrame(this.rafId);
}
```
完整的示例代码如下:
```javascript
import { requestAnimationFrame, cancelAnimationFrame } from 'raf';
export default {
data() {
return {
// ...
};
},
methods: {
draw() {
// ...
this.rafId = requestAnimationFrame(this.draw);
}
},
mounted() {
this.rafId = requestAnimationFrame(this.draw);
},
beforeDestroy() {
cancelAnimationFrame(this.rafId);
}
};
```