Vue3中响应式解构props的使用

<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>

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

// vite.config.js
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

export default defineConfig({
  plugins: [ReactivityTransform()],
})

<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>

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()],
});

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

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

<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>