请给出vue2实现放大镜详细的最简洁的代码，并给出每段代码的注释

<template>
<div class="container"
:style="{ 'background-image': 'url(' + imageUrl + ')' }"
@mousemove="setPos">
<div class="magnifier" :style="magnifier"></div>
</div>
</template>
<!-- 将图片作为背景图，并绑定鼠标移动事件 -->

<script>
export default {
data() {
return {
imageUrl: 'https://picsum.photos/800/600',
magnifier: {
backgroundRepeat: 'no-repeat', // 背景不重复
backgroundPosition: '0 0', // 初始化背景位置
width: '200px', // 放大镜大小
height: '200px', // 放大镜大小
position: 'absolute', // 绝对定位
display: 'none' // 初始状态隐藏
}
};
},
methods: {
setPos(e) {
const rect = e.target.getBoundingClientRect();
const ratio = 2; // 放大倍数为2
const w = this.$refs.magnifier.offsetWidth;
const h = this.$refs.magnifier.offsetHeight;
const x = e.clientX - rect.left - w / ratio / 2;
const y = e.clientY - rect.top - h / ratio / 2;
const bgPosX = -x * ratio + w / 2;
const bgPosY = -y * ratio + h / 2;
this.magnifier.display = 'block';
this.magnifier.left = x + 'px';
this.magnifier.top = y + 'px';
this.magnifier.backgroundImage = 'url(' + this.imageUrl + ')';
this.magnifier.backgroundSize = rect.width * ratio + 'px ' + rect.height * ratio + 'px';
this.magnifier.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px';
}
}
};
</script>
<!-- 设置放大倍数和放大镜位置，并根据光标位置和图片大小计算出显示的区域，最后更新放大镜的样式 -->