vue3-(响应式属性ref相关)

1.ref:接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

注意：被ref包装之后需要.value 来进行赋值，因为使用ref包装，返回的是一个对象，Ref TS对应的接口

<template>
  <button @click="onChangeMsg">修改数据</button>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue';
const message: Ref<string> = ref('ref响应式数据');

const onChangeMsg = () => {
  message.value = '修改后的数据';
};
</script>

ts的另外一种方式：

<template>
  <button @click="onChangeMsg">修改数据</button>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const message = ref<string | number>('ref响应式数据');

const onChangeMsg = () => {
  message.value = '修改后的数据';
};
</script>

2.isRef:判断是否是ref对象，返回值为布尔值：

<template>
  <button @click="onChangeMsg">修改数据</button>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref, isRef } from 'vue';
const message = ref<string | number>('isRef判断是不是ref对象');
const hello: string = '我不是ref对象';

const onChangeMsg = () => {
  message.value = '修改后的数据';
  console.log(isRef(message), '是ref对象，返回true');
  console.log(isRef(hello), '不是ref对象，返回false');
};
</script>

3.shallowRef创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。<template>

  <button @click="onChangeMsg">修改数据</button>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
type Obj = {
  name: string;
  num: number;
};
const message = shallowRef<Obj>({
  name: 'vue3',
  num: 100
});

const onChangeMsg = () => {
  //修改的值无法显示在页面上
  message.value.name = '修改了name';
  //修改的值可以显示在页面上
  //message.value = { name: '修改了name', num: 123 };
　//triggerRef强制修改，修改的值可以在页面显示 
  triggerRef(message);

  console.log(message, 'message');
};
</script>

4.customRef 是个工厂函数要求我们返回一个对象并且实现 get 和 set：

应用场景：实现防抖函数

<template>
  <button @click="onChangeMsg">修改数据</button>
  <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
import { ref, shallowRef, triggerRef, customRef } from 'vue';
 
let message = MycustomRef('我是原始数据');
const onChangeMsg = () => {
  message.value = '修改了数据';
};
 
function MycustomRef<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get: () => {
        track();//通知vue，跟踪数据的变化
        return value;
      },
      set: (newVal: T) => {
        value = newVal;
        trigger();//通知vue重新解析模版，挂载数据
      }
    };
  });
}
</script>