响应性API

响应性API

reactive（深层转换“响应式”）

<script setup lang="ts">
  import { reactive } from 'vue';
  
  const book = reactive({ title: 'Vue 3 Guide' });
</script>

<template>
  <div>{{ book.title }}</div>
</template>

readonly（只读，深层的）

<script setup lang="ts">
  import { reactive, readonly } from 'vue';
  
  const book = reactive({ title: 'Vue 3 Guide' });
  
  const copy = readonly(book);
  
  copy.title = 'book2';  // ⚠️ 无法分配到 "title" ，因为它是只读属性。
</script>

<template>
  <div>{{ book.title }}</div>
</template>

isProxy

检查对象是否是由 reactive或 readonly创建的 proxy。

<script setup lang="ts">
import { reactive, readonly, isProxy } from "vue";

const book = reactive({ title: "Vue 3 Guide" });

const copy = readonly(book);

console.log(isProxy(book)); // true
console.log(isProxy(copy)); // true
</script>

<template>
  <div>{{ book.title }}</div>
</template>

isReactive

检查对象是否是由 reactive 创建的响应式代理。

<script setup lang="ts">
import { reactive, readonly, isReactive } from "vue";

const book = reactive({ title: "Vue 3 Guide" });

// 普通对象创建的只读 proxy
const copy = readonly({ title: "title2" });

console.log(isReactive(book)); // true
console.log(isReactive(copy)); // false
</script>

<template>
  <div>{{ book.title }}</div>
</template>

isReadonly

检查对象是否是由 readonly 创建的只读代理。

<script setup lang="ts">
import { reactive, readonly, isReadonly } from "vue";

const book = reactive({ title: "Vue 3 Guide" });

// 普通对象创建的只读 proxy
const copy = readonly({ title: "title2" });

console.log(isReadonly(book)); // false
console.log(isReadonly(copy)); // true
</script>

<template>
  <div>{{ book.title }}</div>
</template>

shallowReactive（浅层转换“响应式”）

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

const book = shallowReactive({
  title: "Vue 3 Guide",
  info: {
    author: "vue",
  },
});

book.title = "Vue3";
book.info.author = "vue-1";

console.log(book.title);
console.log(book.info.author);
</script>

<template>
  <div>{{ book.title }}</div>
  <div>{{ book.info.author }}</div>
</template>

这丫的把我整懵了，我测试这段代码发现book.info.author还是能响应式修改，懵？？？

shallowReadonly（只读，浅层的）

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

const book = shallowReadonly({
  title: "Vue 3 Guide",
  info: {
    author: "vue",
  },
});

// book.title = "Vue3";  // 无法分配到 "title" ，因为它是只读属性。
book.info.author = "vue-1";

console.log(book.title);
console.log(book.info.author);
</script>

<template>
  <div>{{ book.title }}</div>
  <div>{{ book.info.author }}</div>
</template>

ref

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

const count = ref(0);

console.log(count.value); // 0

count.value++;

console.log(count.value); // 1
</script>

<template>
  <div>{{ count }}</div>
</template>

定义类型

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

const count = ref<number>(0);

console.log(count.value); // 0
</script>

<template>
  <div>{{ count }}</div>
</template>

toRef

<script setup lang="ts">
import { reactive, toRef } from "vue";

const state = reactive({
  foo: 1,
  bar: 2,
});

const fooRef = toRef(state, "foo");

fooRef.value++;
console.log(state.foo); // 2

state.foo++;
console.log(fooRef.value); // 3
</script>

<template>
  <div></div>
</template>

toRefs

<script setup lang="ts">
import { reactive, toRefs } from "vue";

const state = reactive({
  foo: 1,
  bar: 2,
});

const stateAsRefs = toRefs(state);
/*
stateAsRefs 的类型:
{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++;
console.log(stateAsRefs.foo.value); // 2

stateAsRefs.foo.value++;
console.log(state.foo); // 3
</script>

<template>
  <div></div>
</template>

isRef

检查值是否为一个 ref 对象。

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

const count = ref(0);
const count2 = 1;

console.log(isRef(count)); // true
console.log(isRef(count2)); // false
</script>

<template>
  <div></div>
</template>

其它的感觉暂时用不到，所以暂时不写，更多细节查看 => 🌈 官方文档