9 compétences de développement vue3 pour améliorer l'efficacité et vous aider à quitter le travail plus tôt !

//parent.vue
<template>
    <child></child>
    <button>添加</button>
</template>

<script>
import { defineComponent, provide, ref } from "vue";
import Child from "./child.vue";
export default defineComponent({
    components: {
        Child
    },
    setup() {
        const count = ref(0);
        const color = ref(&#39;#000&#39;)
        provide(&#39;count&#39;, count)
        provide(&#39;color&#39;, color)
        function setColor(val) {
            color.value = val
        }
        return {
            count,
            setColor
        }
    }
})
</script>

//child.vue
//使用inject 注入
<template>
    <div>这是注入的内容{{ count }}</div>
    <child1></child1>
</template>

<script>
import { defineComponent, inject } from "vue";
import child1 from &#39;./child1.vue&#39;
export default defineComponent({
    components: {
        child1
    },
    setup(props, { attrs }) {
        const count = inject(&#39;count&#39;);
        console.log(count)
        console.log(attrs)
        return {
            count
        }
    }
})
</script>

//子孙组件child1.vue
<template>
    <div>这是注入的内容的颜色</div>
</template>

<script>
import { defineComponent, inject } from "vue";

export default defineComponent({
    setup(props, { emit }) {
        const color = inject(&#39;color&#39;);
        function setColor() {
            console.log(0)
            emit(&#39;setColor&#39;, &#39;red&#39;)
        }
        return {
            color,
            setColor
        }
    }
})
</script>

<template>
    <div>测试compositionApi</div>
</template>
<script>
import { inject, ref, onMounted, computed, watch } from "vue";
export default {
    // setup起手
    setup(props, { attrs, emit, slots, expose }) {

        // 获取页面元素
        const composition = ref(null)
        // 依赖注入
        const count = inject(&#39;foo&#39;, &#39;1&#39;)
        // 响应式结合
        const num = ref(0)
        //钩子函数
        onMounted(() => {
            console.log(&#39;这是个钩子&#39;)
        })
        // 计算属性
        computed(() => num.value + 1)
        // 监听值的变化
        watch(count, (count, prevCount) => {
            console.log(&#39;这个值变了&#39;)
        })
        return {
            num,
            count
        }

    }
}
</script>

import { watch, getCurrentScope, onScopeDispose, unref, ref } from "vue"
export const isString = (val) => typeof val === 'string'
export const noop = () => { }
export function unrefElement(elRef) {
    const plain = unref(elRef)// 拿到本来的值
    return (plain).$el ?? plain //前面的值为null、undefined，则取后面的值，否则都取前面的值
}
export function tryOnScopeDispose(fn) {
    // 如果有活跃的effect
    if (getCurrentScope()) {
        //在当前活跃的 effect 作用域上注册一个处理回调。该回调会在相关的 effect 作用域结束之后被调用
        //能代替onUmounted
        onScopeDispose(fn)
        return true
    }
    return false
}
//带有控件的setTimeout包装器。
export function useTimeoutFn(
    cb,// 回调
    interval,// 时间
    options = {},
) {
    const {
        immediate = true,
    } = options

    const isPending = ref(false)

    let timer

    function clear() {
        if (timer) {
            clearTimeout(timer)
            timer = null
        }
    }

    function stop() {
        isPending.value = false
        clear()
    }

    function start(...args) {
        // 清除上一次定时器
        clear()
        // 是否在pending 状态
        isPending.value = true
        // 重新启动定时器
        timer = setTimeout(() => {
            // 当定时器执行的时候结束pending状态
            isPending.value = false
            // 初始化定时器的id
            timer = null
            // 执行回调
            cb(...args)
        }, unref(interval))
    }
    if (immediate) {
        isPending.value = true

        start()
    }

    tryOnScopeDispose(stop)

    return {
        isPending,
        start,
        stop,
    }
}
//轻松使用EventListener。安装时使用addEventListener注册，卸载时自动移除EventListener。
export function useEventListener(...args) {
    let target
    let event
    let listener
    let options
    // 如果第一个参数是否是字符串
    if (isString(args[0])) {
        //结构内容
        [event, listener, options] = args
        target = window
    }
    else {
        [target, event, listener, options] = args
    }
    let cleanup = noop
    const stopWatch = watch(
        () => unrefElement(target),// 监听dom
        (el) => {
            cleanup() // 执行默认函数
            if (!el)
                return
            // 绑定事件el如果没有传入就绑定为window
            el.addEventListener(event, listener, options)
            // 重写函数方便改变的时候卸载
            cleanup = () => {
                el.removeEventListener(event, listener, options)
                cleanup = noop
            }
        },
        //flush: 'post' 模板引用侦听
        { immediate: true, flush: 'post' },
    )
    // 卸载
    const stop = () => {
        stopWatch()
        cleanup()
    }

    tryOnScopeDispose(stop)

    return stop
}

export function useClipboard(options = {}) {
    //获取配置
    const {
        navigator = window.navigator,
        read = false,
        source,
        copiedDuring = 1500,
    } = options
    //事件类型
    const events = ['copy', 'cut']
    // 判断当前浏览器知否支持clipboard
    const isSupported = Boolean(navigator && 'clipboard' in navigator)
    // 导出的text
    const text = ref('')
    //导出的copied
    const copied = ref(false)
    // 使用的的定时器钩子
    const timeout = useTimeoutFn(() => copied.value = false, copiedDuring)

    function updateText() {
        //解析系统剪贴板的文本内容返回一个Promise
        navigator.clipboard.readText().then((value) => {
            text.value = value
        })
    }

    if (isSupported && read) {
        // 绑定事件
        for (const event of events)
            useEventListener(event, updateText)
    }
    // 复制剪切板方法
    //navigator.clipboard.writeText 方法是异步的返回一个promise
    async function copy(value = unref(source)) {
        if (isSupported && value != null) {
            await navigator.clipboard.writeText(value)
            // 响应式的值，方便外部能动态获取
            text.value = value
            copied.value = true
            timeout.start()// copied.value = false 
        }
    }

    return {
        isSupported,
        text,
        copied,
        copy,
    }
}

<template>
    <div>
        <p>
            <code>{{ text || '空' }}</code>
        </p>
        <input>
        <button>
            <span>复制</span>
            <span>复制中!</span>
        </button>
    </div>
    <p>您的浏览器不支持剪贴板API</p>
</template>
<script>
import { ref, getCurrentScope } from &#39;vue&#39;
import { useClipboard } from &#39;./copy.js&#39;
const input = ref(&#39;&#39;)
const { text, isSupported, copied, copy } = useClipboard()
console.log(text)// 复制内容
console.log(isSupported)// 是否支持复制剪切板api 
console.log(copied)//是否复制完成延迟
console.log(copy) // 复制方法
</script>