vue3.5系列之响应式props解构的几点技巧对比

在最新的版本3.5x中，对props的能力也进行了加强。下面，我们具体看下有哪些变化，给我们带来的新的体验！

体验一

• 3.5之前解构props的效果

// 子组件
<template>
  <div>
    <h1>响应式props</h1>
    <p>{{ count }}</p>
  </div>
</template>

<script setup>
import { watch, watchEffect } from "vue";
const { count } = defineProps(["count"]);

watchEffect(() => {
  console.log("count", count);
});
watch(
  () => count,
  newVal => {
    console.log("count", newVal);
  }
);
</script>

// 父组件
<template>
  <div>
    <ChildProps :count="count" />
    <button @click="count++">Click me</button>
  </div>
</template>

<script setup>
import ChildProps from "@/components/ChildProps";
import { ref } from "vue";
const count = ref(0);
</script>

• 代码解析
  • 子组件解构父组件传来的count数据，在子组件中是无法watch到count的更新的，如上图
  • 同样的代码，只需更换vue版本到3.5,监听就会生效了，如下图
  • 解析出来的count，在进行watch时，不能直接传count,要用对应的get
  • 反例:这并不会按预期工作，因为它等价于 watch(props.foo, ...)——我们给 watch 传递的是一个值而不是响应式数据源。实际上，Vue 的编译器会捕捉这种情况并发出警告。

  watch(count, /* ... */)
  

体验二

将我们结构出来的props属性，传给自定义的hooks，保持数据的响应性，那怎么做？

• 实现效果
  
• 代码实现

// 自定义hooks
import { toValue, ref, watchEffect } from "vue";
export function useCountAdd(num) {
  let computedCount = ref(0);

  watchEffect(() => {
    computedCount.value = toValue(num) + 1;
  });
  return computedCount;
}

• 父组件

<template>
  <div>
    <h1>响应式props</h1>
    <p>{{ count }}</p>
    <p>{{ newCount }}</p>
  </div>
</template>

<script setup>
import { useCountAdd } from "@/hooks/useCount";

const { count } = defineProps(["count"]);

// （1）
const newCount = useCountAdd(count);
</script>

(1)：如果直接传递解构出来的count，我们的页面是不能及时响应更新的。

正例：

const newCount = useCountAdd(() => count);