4.Vue3.0组合式API案例

最新推荐文章于 2023-11-20 09:03:14 发布

「已注销」

最新推荐文章于 2023-11-20 09:03:14 发布

阅读量612

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44316317/article/details/122349793

版权

本文探讨Vue3.0的全新特性——组合式API，通过实例解析其在实际开发中的应用，展示如何利用该API提高代码组织和复用效率。

摘要由CSDN通过智能技术生成

Vue3.0组合式API案例

<template>
    <div>
       <div>
           坐标x:{{x}}
       </div>
       <div>
           坐标y:{{y}}
       </div>
       <div>{{count}}</div>
       <button @click="add">累加</button>
    </div>
</template>

<script>
import { reactive,onMounted,toRefs, onUnmounted,ref} from 'vue'
const  usemouse=()=>{
       //1.记录鼠标坐标位置
      //2.声明一个响应式数据它是一个对象包含下x,y
      const mouse = reactive({
          x:0,
          y:0
      })
      //等dom渲染完毕去监听事件的变化
      //在move函数中修改响应的数据
      const move =(e)=>{
         mouse.x = e.pageX;
         mouse.y = e.pageY;
      }
      onMounted(()=>{
          document.addEventListener('mousemove',move);
      })
      //组件消耗删除事件
      onUnmounted(()=>{
          //当组件销毁将绑定的事件销毁
          document.removeEventListener('mousemove',move);
      })
      return mouse
}
export default {
    name:'App',
    setup(){
      const mouse = usemouse;//将usemouse与之前的代码剥离
      //数字累加
      const count = ref(0)
      const add=()=>{
          count.value ++
      }
      return {...toRefs(mouse),count,add}
    }
}
</script>

<style lang="scss" scoped>

</style>