开始

文件指纹

https://github.com/fingerprintjs/fingerprintjs

useVMOdel 组件件多个数据通信

const cacheMap = new WeakMap();

export function useVModel(props, propName, emit) {
  return computed({
    get() {
      if (cacheMap.has(props[propName])) {
        return cacheMap.get(props[propName]);
      }

      const proxy = new Proxy(props[propName], {
        get(target, key) {
          return Reflect.get(target, key);
        },
        set(target, key, value) {
          emit("update:" + propName, {
            ...target,
            [key]: value,
          });
          return true;
        },
      });
      cacheMap.set(props[propName], proxy);
      return proxy;
    },
    set(val) {
      emit("update:" + propName, val);
    },
  });
}

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue"]);
const model = useVModel(props, "modelValue", emit);

vue 三种路由方式

1. 1.hash:默认值。路由从浏览器地址栏中的 hash 部分获取路径,改变路径也是改变的 hash 部分。该模式兼容性最好。
2. history:路由从浏览器地址栏的 1ocation.pathname 中获取路径,改变路径使用的 H5 的 history api 可以让地址栏最友好,但是需要浏览器支持 history api
3. abstract:路由从内存中获取路径,改变路径也只是改动内存中的值。这种模式通常应用到非浏览器

history.pushState(null, null, "/blog");

ref 实现防抖

<template>
  <div class="container">
    <input :value="text" @input="handleUpdate" />
    <p class="result">{{text}}</p>
  </div>
</template>

import { ref } from "vue";
const text = ref("");
const handleUpdate = (e) => {
  text.value = e.target.value;
};

import { customRef } from "vue";
export function debounceRef(value, delay = 1000) {
  let timer;
  return customRef((yrack, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(val) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = val;
          trigger();
        }, delay);
      },
    };
  });
}

vue 的 v-model

<template>
  <!-- <el-input
    v-model="modelValue.keyword" //这个相当于下面几个
    :modelValue="modelValue.keyword"
    @update:modelValue="handleKeywordChange"
    :placeholder="model.placeholder"
  > -->
  <el-input
    v-model="modelValue.keyword"
    :modelValue="modelValue.keyword"
    @update:modelValue="handleKeywordChange"
    :placeholder="model.placeholder"
  >
    <template #prepend>
      <el-select
        v-model="modelValue.selectedValue"
        placeholder="select"
        style="width:85px"
      >
      </el-select>
    </template>
  </el-input>
</template>

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue"]);
const model = useVmodel(props, "modelValue", emit);

import { computed } from "vue";
const cacheMap = new WeakMap();
export function useVModel(props, propsName, emit) {
  return computed({
    get() {
      if (cacheMap.has(props[propsName])) {
        return cacheMap.get(props[propsName]);
      }
      const proxy = new Proxy(props[propsName], {
        get(target, key) {
          return Reflect.get(target, key);
        },
        set(target, key, value) {
          emit("update:" + propsName, {
            ...target,
            [key]: value,
          });
          return true;
        },
      });
      cacheMap.set(props[propsName], proxy);
      return proxy;
    },
    set() {
      emit("update" + propsName, val);
    },
  });
}

<el-input
  v-model="modelValue.keyword"
  :modelValue="modelValue.keyword"
  @update:modelValue="handlekeywordChange"
>
</el-input>

<!-- :modelValue="modelValue.keyword"
  @update:modelValue="handlekeywordChange" -->
<!-- 相当于 -->
<!-- v-model="modelValue.keyword" -->