Vue.js 模式：使用 Vue.js 3 Composition API 实现响应式父组件...

Vue.js 模式：使用 Vue.js 3 Composition API 实现响应式父组件

在 Vue.js 开发中，父组件向子组件传递数据是一个常见的需求。通常，我们会通过 props 来实现这一功能。子组件接收父组件传递的数据后，可能需要将其作为初始状态，并在内部对其进行修改，例如绑定到一个双向数据的文本输入框。

然而，这种实现方式会面临一些限制和挑战。本文将探讨这些问题，并通过 Vue.js 3 Composition API 提供解决方案。

常见问题：props 和 ref 的限制

在 Vue.js 中，props 被设计为不可变的，子组件不应该直接修改从父组件接收到的 props 数据。这种设计虽然有助于保持数据流的单向性，但在某些场景下可能会带来不便。

另一方面，ref 是 Vue.js 响应式系统的一部分，允许我们创建可变的响应式数据。例如，我们可以通过以下方式将 props 的值转化为响应式数据：

const content = ref(props.content);

然而，这种方式也存在潜在问题：ref 的初始化只会在组件挂载时执行一次。如果父组件更新了 props 的值，子组件中的 ref 并不会自动同步更新。这种行为可能会导致数据不一致的问题。

如何正确使用 ref？

为了解决上述问题，我们可以借助 Vue.js 的 watch 或 watchEffect 函数。这些函数是 Vue.js 响应式系统的重要组成部分，能够监视响应式对象的变化，并在变化发生时触发回调函数。

以下是一个完整的代码示例，展示如何通过 watchEffect 函数实现父组件和子组件之间的双向绑定。

父组件示例

父组件定义了一个 content 属性，并将其传递给子组件。父组件可以动态更新 content 的值：

  

    
    
  



import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const content = ref('父组件初始内容');
    return { content };
  },
};

子组件示例

子组件接收 content 属性，并通过 watchEffect 函数实现对 props 数据的监视和同步：

  

    
  



import { ref, watchEffect } from 'vue';

export default {
  props: ['content'],
  setup(props) {
    const content = ref(props.content);

    watchEffect(() => {
      content.value = props.content;
    });

    return { content };
  },
};

watch 和 watchEffect 的对比

watch 的用法

watch 函数可以监视特定的响应式数据源，并在数据源发生变化时触发回调函数。例如：

watch(
  () => props.content,
  (newValue) => {
    content.value = newValue;
  },
  { immediate: true }
);

• 源函数：() => props.content，返回需要监视的值。
• 回调函数：在源值变化时执行，用于更新本地状态。
• 选项对象：immediate: true 表示在 watch 创建时立即执行回调。

watchEffect 的用法

相比于 watch，watchEffect 更加简洁，不需要显式指定源数据。它会自动追踪内部使用的响应式数据：

watchEffect(() => {
  content.value = props.content;
});

watchEffect 的主要优势在于简化了代码逻辑，适用于需要监视多个响应式数据的场景。

不使用 setup 语法糖的实现

如果不使用 setup 语法糖，我们可以通过传统的选项式 API 实现相同的功能：

export default {
  props: ['initialData'],
  data() {
    return {
      data: this.initialData,
    };
  },
  watch: {
    initialData(newValue) {
      this.data = newValue;
    },
  },
};

在这个例子中，data 是 initialData 的本地副本。通过 watch 监听 initialData 的变化，确保 data 始终与最新的 initialData 保持同步。

总结

在 Vue.js 3 中，通过 watch 或 watchEffect 函数，我们可以轻松实现父组件和子组件之间的双向绑定，同时避免直接修改 props 带来的问题。这种模式不仅符合 Vue.js 的设计理念，还能提高代码的可维护性和可读性。

无论是使用 Composition API 还是选项式 API，都可以根据项目需求选择适合的实现方式。希望本文的示例和讲解能为您在 Vue.js 开发中提供一些启发。

原文链接: https://lirantal.com/blog/vuejs-patterns-using-vuejs-3-composition-api-for-reactive-parent-to-child-communication