Modular development of the first part of the mouse tracker

// Const x = ref(0), const y = ref(0), const updateMouse = (e: MouseEvent) => { x.value = e.pageX y.value = e.pageY } onMounted(() => { document.addEventListener('click', updateMouse) }) onUnmounted(() => { document.removeEventListener('click', Function useMouseTracker() {// positions = reactive<MousePostion>({// x: 0, // y: 0 // }) const x = ref(0) const y = ref(0) const updatePosition = (event: MouseEvent) => { x.value = event.clientX y.value = event.clientY } onMounted(() => { document.addEventListener('click', updatePosition) }) onUnmounted(() => { document.removeEventListener('click', updatePosition) }) return { x, y } } export default useMouseTrackerCopy the code

Advantages of vuE3 implementation

  • First, it knows exactly where the xy values come from and what the two parameters are for. They come from the return of useMouseTracker, so they are the values used to track the mouse position.
  • Second: we can xy can set any alias, thus avoiding the risk of naming conflicts.
  • Third: this logic can exist without the component, because it has nothing to do with the implementation of the component. We do not need to add any components to implement the corresponding function. Only logical code is in there, no templates required.

Modular difficulty increased – useURLLoader

Note that axios comes with a type file, so we don’t need to install a typescript definition file for it

npm install axios –save

Import {ref} from 'vue' import axios from 'axios' // Add a parameter as the address to use const useURLLoader = (url: String) => {// declare several ref, Const result = ref(null) const loading = ref(true) const loaded = ref(false) const error = ref(null) // // Since axios is defined, So rawData can easily know its type axios.get(URL).then((rawData) => {load.value = false load. value = true result.value = Rawdata.data}). Catch ((e) => {error.value = e}) return {result, loading, error, loaded } } export default useURLLoaderCopy the code

Get free API address for dog pictures

/ / use the urlLoader dog pictures const {result, loading, the loaded} = useURLLoader (' https://dog.ceo/api/breeds/image/random ')... <h1 v-if="loading">Loading! . </h1> <img v-if="loaded" :src="result.message" >Copy the code

At the end

Do weigh in hand wrap up work, have don’t understand although ask, I am free will reply of

Big guys, interested can pay attention to my public number duck, now or single digit, wronged…

Lazy people, do not want to map, hope to help you

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together

Narrative:

  • 12 ~ 18K front-end interview will ask what?
  • The shift from outsourcing to self-employment | 2021 mid-year summary

Technology,

Chaotic series

  • Uniapp Configures ios Universal Link and associate Domains

Vue series

  • The same login and registration interface? Teach you to do a cool!
  • Vue3’s setup and Ref syntax
  • Provide and inject vue3
  • Vue3 + vite + vant + typescript – Day 1
  • Vue3 + TS Encapsulates request request, storage cache, and Config request information. – The next day
  • Vue3 + TS Package bottom Tabbar – Day 3
  • Vue3 + TS Canvas for Bezier curve wave effects – Day 4
  • Vue3 + TS Today understand custom hooks – Day 5
  • Vue3 + TS Mobile terminal and PC terminal realize waterfall flow – Day 6

The typescript series

  • On day one, data types and vscode work with Typescript
  • The next day, interface and Readonly properties
  • Typescript Day 3 – Functions
  • Typescript Day 4 – Type inference, joint types, and type assertions
  • Day 5 – Classes and interfaces
  • Day 6 – Generics/generic constraints/Generics with classes and interfaces
  • Typescript Day 7 – Type aliases and cross types
  • Day 8 – Declaring files, built-in types

The react – native series

  • React-native lifecycle details
  • [React-native]JSX and RN styles and differences from the Web
  • [React -native] Mobx [React -native] Mobx [React -native] Mobx