三 新的代码组织方式 Composition Api + script setup [一]

1 一段来自作者的微博。

归纳性描述:

Composition Api 可以让我们更好的组织代码结构 . script setup 本质上是以一种更精简的方式来书写Compositino Api.

2 示例1 : 写个计数器

  #在home.vue 加上todoList
  

 //todolist.vue 文件 
 

通过这个例子,熟悉了ref 的用法.

3进一步的,将之前的todolist 写成单vue 文件 .

4再重构一下,用一个函数包起来.

5 utils/mouse.js

import {ref, onMounted, onUnmounted} from 'vue'

export function useMouse() {
    const x = ref(0)
    const y = ref(0)
    function update(e) {
        x.value = e.pageX
        y.value = e.pageY
    }
    onMounted(() => {
         window.addEventListener('mousemove', update)
    })
    onUnmounted(()=>{
        window.removeEventListener('mousemove', update)
    })

        return {x,y}
}

//使用方法
import {useMouse} from './utils/mouse'
let {x,y} = useMouse()