ref 全家桶

reactive 全家桶及源码学习

reactive 全家桶及源码学习

一、 ref

接收一个内部值并返回一个响应式且可变的 ref 对象（RefImpl的实例对象）。

可以无脑使用 ref 代替 reactive，使用 ref 方便书写，使用 reactive 突出数据的关联性。

JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。

<template>
  <div id="container">
    <div>{{ str }}</div>
    <div>{{ str2 }}</div>
    <button @click="change">修改非 响应式</button>
    <button @click="change2">修改响应式</button>
    <button @click="change3">同时修改</button>
  </div>
</template>

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

let str = "我是非响应式数据";

const str2 = ref<string>("我是响应式数据");

const change = () => {
  str = "我是非响应式数据， 我变了"; //单独改变非响应式数据，页面不会更新
};

const change2 = () => {
  str2.value = "我是响应式数据， 我变了";
};

const change3 = () => {
  str = "我是非响应式数据， 我变了";
  str2.value = "我是响应式数据， 我变了";
  //同时改变响应式和非响应式数据，str和str2都会更新，有点奇怪，还没找到原因
};
</script>

1.1. ref 的 ts 写法

import { ref } from "vue";
// 写法一：
// type n = {
//   num: number;
// }
// const a = ref<n>({ num: 3})

// 写法二：
// import { Ref } from 'vue';
// type n = {
//   num: number;
// }
// const a:Ref<n> = ref({ num: 3})

// 写法三：
// 自行做数据类型推导
const a = ref({ num: 3 });

1.2. ref 获取 DOM 元素

<template>
  <button @click="xxx">渲染DOM后触发</button>
  <div ref="dom">这是一个div元素</div>
</template>

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

const dom = ref<HTMLDivElement>();
// 不可以直接这样直接输出，因为DOM还没有渲染
// console.log(dom.value?.innerText);
// onMounted(() => {
//   console.log(dom.value?.innerText);
// }),
const xxx = () => {
  console.log(dom.value?.innerText);
};
</script>

<style scoped></style>

1.3. ref数据打印查看不便的问题

const num = ref(11)
console.log(num)

• 打印结果

1.4. 解决办法

• 打开控制台点击设置小齿轮

• 找到控制台设置，并把最后一项勾选上
  

• 刷新网页，并重新打开控制台
  

二、isRef

判断是不是一个ref对象

import { ref, isRef } from "vue";
let str = "我是非响应式数据";
const num = ref<number | string>("112");
console.log(isRef(num)); //true
console.log(isRef(str)); //false

三、shallowRef

和 ref() 不同，浅层 ref （shallowRef）的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的

<template>
  <div>
    <el-button @click="changeMsg">change</el-button>
    <div>{{ state.count }}</div>
  </div>
</template>
<script setup lang="ts">
import { shallowRef } from "vue";
const state = shallowRef({ count: 1 });
const changeMsg = () => {
  // 不会触发页面更改
  // state.value.count = 2
  // console.log(state.value.count); //2

  // 会触发页面更改
  state.value = { count: 2 };
};
</script>

三、triggerRef

强制触发依赖于一个浅层 ref （shallowRef）的副作用（强制更新页面DOM）

<template>
  <div>
    <el-button @click="changeMsg">change</el-button>
    <div>{{ state.count }}</div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, triggerRef } from "vue";
const state = shallowRef({ count: 1 });
const changeMsg = () => {
  // 不会触发页面更改
  state.value.count = 2;
  triggerRef(state); //利用triggerRef，state.count也会页面更新 2
  // 会触发页面更改
  // state.value = { count: 2 }
};
</script>

四、customRef

自定义的 ref

• customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象
• 一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权

customRef 可以用防抖优化，代码如下：

<template>
  <button @click="xxx">修改</button>
  <div>{{ obj }}</div>
</template>

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

function MyRef<T>(value: T) {
  let timer: any;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        // 如果按钮会调用接口，一直点按钮则会重复调用接口，造成服务器压力
        // console.log("触发了");
        // 因此可以手动写定时器防抖

        // 清除之前可能存在的定时器 timer
        clearTimeout(timer);
        // 创建新的定时器
        timer = setTimeout(() => {
          console.log("触发了");
          value = newValue;
          timer = null;
          trigger();
        }, 500);
      },
    };
  });
}
const obj = MyRef<string>("customRef 定义");
const xxx = () => {
  obj.value = "customRef 被修改了";
};
</script>

<style scoped></style>

五、toRef、toRefs、toRaw

toRef、toRefs、toRaw