vue3.0 自定义customRef使用；provide和inject使用；

1. ref相当于精装房，customRef相当于毛坯房需要自己进行定义装修等

<!--
 * @Description:
 * @Author: zdx
 * @Date: 2021-12-23 10:57:05
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2021-12-24 15:30:30
-->

<template>
    <input
        type="text"
        placeholder="请输入值"
        v-model="inputT2"
    >
    <hr>
    <div>inputT2展示内容为：{{inputT2}}</div>
</template>

<script>
import { customRef } from "vue";
export default {
    name: "Demo",
    setup() {
        function myRef(value) {
            return customRef((track, trigger) => {
                return {
                    get() {
                        track();
                        return value;
                    },
                    set(newValue) {
                        // 这里可以加定时器处理异步等
                        console.log("****", newValue);
                        value = newValue;
                        trigger();
                    },
                };
            });
        }
        let inputT2 = myRef("hello");
        return {
            inputT2,
        };
    },
};
</script>

2.provide和inject（祖孙传参）

祖组件

export default {
    name: "App",
    setup() {
        const car = reactive({
            name: "奔驰大G",
            price: "40w",
        });
        provide('car', car);
        return { car };
    },
};

孙组件

export default {
    name: "App",
    setup() {
        let car = inject('car')
        return { car };
    },
};