一、vue2的Options API (选项API)
<template>
<div>
<h1>当前鼠标的位置</h1>
<div>{
{ msg }}</div>
<div>{
{ x }}, {
{ y }}</div>
</div>
</template>
<script>
export default {
data() {
return {
x: 0,
y: 0,
}
},
created() {
document.addEventListener("mousemove", this.move)
},
methods: {
move(e) {
this.x = e.pagex
this.y = e.pagey
}
},
beforeDestory() {
document.removeEventListener("mousemove", this.move)
}
}
</script>
总结:上面是一个获取鼠标位置的一个案例, 代码有明确的书写位置,逻辑不容易复用-*
二、vue3的composition API (组合API)
普通写法
<template>
<div>
<h1>当前鼠标的位置</h1>
<div>{
{ msg }}</div>
<div>{
{ x }}, {
{ y }}</div>
</div>
</template>
<script>
import { reactive, ref, onMounted, onUnmounted } vue 'vue'
function mouseHandle() {
}
export default {
setup() {
const mouse = reactive({
x: 0,
y: 0,
})
const move = (e) => {
mouse.x = e.pageX
mouse.y = e.pageY
}
const msg = ref('hello')
onMounted(() => {
document.addEventListener("mousemove", this.move)
})
onUnmounted(() => {
document.addEventListener("mousemove", this.move)
})
return {
...toRefs(mouse),
msg,
}
}
}
</script>
把功能分离出去
<template>
<div>
<h1>当前鼠标的位置</h1>
<div>{
{ msg }}</div>
<div>{
{ x }}, {
{ y }}</div>
</div>
</template>
<script>
import { reactive, ref, onMounted, onUnmounted } vue 'vue'
function mouseHandle() { // 抽离出去的功能
const mouse = reactive({
x: 0,
y: 0,
})
const move = (e) => {
mouse.x = e.pageX
mouse.y = e.pageY
}
onMounted(() => {
document.addEventListener("mousemove", this.move)
})
onUnmounted(() => {
document.addEventListener("mousemove", this.move)
})
return mouse
}
export default {
setup() {
const mouse = mouseHandle() // 把功能引入进来
const msg = ref('hello')
return {
...toRefs(mouse),
msg,
}
}
}
</script>
总结:把功能抽离出去,存放在一个js文件中,上面案例没有单独放在一个js文件中。 如果哪个组件要使用这个功能可以引入,例如上面的:const mouse = mouseHandle()获取这个功能,维护起来也比较方便,不需要上下滚轮,哪个功能需要修改就进入对应的文件中