Vue3 --- 使用 Vue3 实现常用功能

1. 防抖原理

<template>
  <input type="text" v-model="keyword">
  <h3>{{ keyword }}</h3>
</template>

<script lang="ts" setup name="Index">
import {customRef,ref} from "vue";

// 自定义一个myRef
function myRef(value:string, delay:number) {
  let timer:number
  // 通过customRef去实现自定义
  return customRef((track, trigger) => {
    return {
      get() {
        track()  // 通知vue追踪value的变化,让vue知道value是有用的
        return value
      },
      set(newValue) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          value = newValue  // 将原数据修改为最新数据
          trigger()   // 通知vue重新解析模版
        }, delay)
      }
    }
  })

}

// let keyword = ref("hello")  // 使用Vue内置的ref, 无法实现防抖效果
let keyword = myRef("hello", 500)  // 使用自定义的 myRef 来加工响应式数据, 可以使用逻辑来自定义控制响应式数据
</script>

<style>

</style>

2. 浏览器全屏

1. 模块下载

npm install --save screenfull

2. 代码实现

<template>
  <h2>我是App</h2>
  <button @click="biggerHandler">全屏显示</button>
</template>

<script lang="ts" setup name="App">
import screenfull from "screenfull";

function biggerHandler() {
  // 调用全屏的方法
  screenfull.toggle();
}

</script>

<style>
</style>