vue之鼠标事件小Demo

对vue3的基础认识

案例中使用到：

setup生命周期函数，必须有返回值，其返回值可在模板内直接使用

vue3中按需导入：

       1. reactive 常用于操作对象数据的响应式化 

        2. ref 常用于操作单个简单类型数据的响应式化，也可操作复杂数据类型。当未知数据类型时，推荐使用ref(null)）

        3. toRefs  常用于setup的返回对象中直接解构对象，让模板可直接拿到其中的单个属性

        4. 常用生命周期钩子

                onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted 

模板部分

<template>
  <div class="container">
    <div>鼠标位置：</div>
    <div>X轴：{{ x }}</div>
    <div>Y轴：{{ y }}</div>
  </div>
</template>

vue2

JS部分

<script>
export default {
  name: "App",
  data() {
    return {
      x: 0,
      y: 0,
    };
  },
  methods: {
    MouseMove(e) {
      // console.log(e);
      this.x = e.pageX;
      this.y = e.pageY;
    },
  },
  mounted() {
    document.addEventListener("mousemove", this.MouseMove);
  },
  destroyed() {
    document.removeEventListener("mousemove", this.MouseMove);
  },
};
</script>

vue3

JS部分

方法一

<script>
// 按需导入 
import { ref, onMounted, onUnmounted } from "vue";
export default {
  setup() {
    // 定义属性
    let x = ref(0);
    let y = ref(0);
    // 定义方法
    let MouseMove = (e) => {
      x.value = e.pageX;
      y.value = e.pageY;
    };
    onMounted(() => {
      document.addEventListener("mousemove", MouseMove);
    });
    onUnmounted(() => {
      document.removeEventListener("mousemove", MouseMove);
    });
    return {
      x,
      y,
      MouseMove,
    };
  },
};
</script>

方法二

<script>
// 按需导入
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
export default {
  setup() {
    // 定义属性
    let position = reactive({
      x: 0,
      y: 0,
    });
    // 定义方法
    let MouseMove = (e) => {
      position.x = e.pageX;
      position.y = e.pageY;
    };
    onMounted(() => {
      document.addEventListener("mousemove", MouseMove);
    });
    onUnmounted(() => {
      document.removeEventListener("mousemove", MouseMove);
    });
    return {
      ...toRefs(position),
      MouseMove,
    };
  },
};
</script>