vite+ts+vue3 知识点（ref）

ref（数据响应式）

<template>
  <div>
    {{ msg.name }} // 点击按钮会变成 李子天
    <button @click="btn('李子天')">改变</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

type Msg = {
  name: string;
};
const msg = ref<Msg>({ name: "梁延涛" });

const btn = (arg: string) => {
  msg.value.name = arg;
};
</script>

<style scoped></style>

isRef（判断一个变量是否是ref响应式）

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

type Msg = {
  name: string;
};

const msg = ref<Msg>({ name: "梁延涛" });

const btn = (arg: string) => {
  msg.value.name = arg;
  console.log(isRef(msg)); // true
};
</script>

shallowRef（更改浅层数据）和 triggerRef（强制更新数据）

注意：shallowRef 不能和 ref 混用，会影响 shallowRef，造成视图的更新

数据响应式方法1（赋值给value）

<script setup lang="ts">
import { shallowRef } from "vue";

type Msg = {
  name: string;
};
const msg = shallowRef<Msg>({ name: "梁延涛" });

const btn = (arg: string) => {
  msg.value = {
    name: arg,
  };
  console.log(msg);
};
</script>

数据响应式方法2（使用triggerRef强制更新）

<script setup lang="ts">
import { shallowRef, triggerRef } from "vue";

type Msg = {
  name: string;
};
const msg = shallowRef<Msg>({ name: "梁延涛" });

const btn = (arg: string) => {
  msg.value.name = arg;
  triggerRef(msg);
  console.log(msg);
};
</script>

customRef（自定义ref）

import { customRef } from "vue";

function MyRef<T>(value: T) {
  let timer: any;
  return customRef((track, trigger) => {
    return {
      get() {
        // 收集依赖
        track();
        return value;
      },
      set(newVal) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log("调用接口");
          value = newVal;
          timer = null;
          // 更新依赖
          trigger();
        }, 500);
      },
    };
  });
}

const objs = MyRef<string>("啦啦");
const btn = () => {
  objs.value = "哈哈哈";
  console.log(objs);
};

ref（获取dom）

<template>
  <div>
    <button @click="btn" ref="btnDom">调接口</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

let btnDom = ref<HTMLButtonElement>();

const btn = () => {
  console.log(btnDom.value?.innerText); // 调接口
};

</script>