1，前言

Vue3 中為了保持響應性，始終需要以 props.x 的方式訪問這些 prop。這意味著不能夠解構 defineProps 的返回值，因為得到的變量將不是響應式的、也不會更新。

以下面的父子組件為例：

父組件

<template><Children :count="count" />
</template><script setup>
import { ref, reactive } from "vue";
import Children from "./components/Children.vue";
const count = ref(0);
</script>

子組件

<template><div>{{ count }}</div>
</template><script setup>
const props = defineProps({count: Number,
});let { count } = props;
count++;
console.log(props.count); // 0，并不會發生變化 
</script>

2，解決

2.1，利用插件，實現編譯時轉換

原本 Vue3 是支持的 reactivity-transform，后來廢棄了。但是可以通過 Vue Macros 插件 來實現，用法如下：

1，安裝插件，并在 vite 中配置。

npm i -D @vue-macros/reactivity-transform

// vite.config.js
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'export default defineConfig({plugins: [ReactivityTransform()],
})

2，會在組件中自動生效。

<template><div>{{ msg }}</div><div>{{ count }}</div>
</template><script setup>
import { watchEffect } from "vue";
const { msg, count } = defineProps({msg: String,count: Number,
});watchEffect(() => {// 會在 props 變化時打印console.log(msg, count);
});
</script>

3，原理

先通過 vite-plugin-inspect 插件 來查看插件的中間狀態。

npm i -D vite-plugin-inspect

完整配置

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import ReactivityTransform from "@vue-macros/reactivity-transform/vite";
import Inspect from "vite-plugin-inspect";export default defineConfig({plugins: [vue(), ReactivityTransform(), Inspect()],
});

本地啟動后，訪問 http://localhost:5173/__inspect/ 可檢查項目的模塊和棧信息。

可以看到是做了轉換，通過 __props 來訪問自然是響應式的。

watchEffect(() => {console.log(msg, count);
});

watchEffect(() => {console.log(__props.msg, __props.count);
});

問題來了，這個 __props 是什么？

我們再看下 @vitejs/plugin-vue 這個插件的做了什么：會發現編譯單文件組件后，setup 變為函數，其中一個參數就是 __props ，也就是傳入的 props。

所以，我們在 vue 單文件中，也可以直接使用 __props 并不會報錯。

2.2，toRef 和 toRefs

toRef，基于響應式對象上的一個屬性，創建一個對應的 ref，這個 ref 與其源屬性保持同步：改變源屬性的值將更新 ref 的值。

toRefs，將一個響應式對象轉換為一個普通對象，這個普通對象的每個屬性都是指向源對象相應屬性的 ref。每個單獨的 ref 都是使用 toRef() 創建的。

所以，可以這樣做：

<template><div>{{ _msg }}</div><div>{{ msg }}</div><div>{{ count }}</div>
</template><script setup>
import { toRef, toRefs } from "vue";
const props = defineProps({msg: String,count: Number,
});// _msg 也是響應式的，會隨著 props.msg 改變。
const _msg = toRef(props, "msg");// msg, count也是響應式的，會隨著 props 改變。
const { msg, count } = toRefs(props);
</script>

---

以上。