vue3之composition API

一、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()获取这个功能，维护起来也比较方便，不需要上下滚轮，哪个功能需要修改就进入对应的文件中