Vue3 的函数式开发，摆脱 Prop 和 Emit 藩篱的利器

2023-09-04 03:46:04

引领潮流：函数式开发席卷 Vue3

作为一名资深的技术博主，我敏锐地察觉到函数式开发已在 Vue3 中强势崛起，成为引领潮流的开发范式。在本文中，我将揭开函数式开发的神秘面纱，一探究竟它如何利用组合式 API 和响应式系统，取代了 Prop 和 Emit，带来更加简洁、清晰、且更具可读性的代码。

解构 Prop 和 Emit，拥抱组合式 API

在传统的 Vue2 中，我们习惯了使用 Prop 和 Emit 来传递数据和事件。然而，在 Vue3 中，这些概念已被组合式 API 取代。组合式 API 引入了 composition 函数，它允许我们创建和复用代码逻辑，而无须借助 Prop 和 Emit。

composition 函数的本质是一个工厂函数，它返回一个对象，该对象包含一系列可重用的函数。这些函数可以用来创建组件、管理响应式状态，以及处理事件。通过组合这些函数，我们可以构建出更加复杂且可复用的组件。

例如，我们可以创建一个按钮组件，它在点击时会触发一个自定义事件。在 Vue2 中，我们需要使用 Prop 来传递事件处理函数，而在 Vue3 中，我们可以使用组合式 API 来实现同样的功能。

// Vue2
<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  props: {
    handleClick: {
      type: Function,
      required: true,
    },
  },
};
</script>

// Vue3
<template>
  <button @click="handleClick">点我</button>
</template>

<script>
import { ref, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const handleClick = ref(null);

    onBeforeUnmount(() => {
      handleClick.value = null;
    });

    return {
      handleClick,
    };
  },
};
</script>

如您所见，在 Vue3 中，我们使用 onBeforeUnmount 钩子函数来确保在组件销毁时取消事件监听器。这种做法更加简洁、清晰，也更具可读性。

借助响应式系统，打造无缝的 reactivity 体验

Vue3 中另一个重要的变化是引入了响应式系统。该系统可以自动追踪和更新组件中的数据变化，而无须借助 Prop 和 Emit。这意味着我们可以更加轻松地构建出具有响应式行为的组件。

例如，我们可以创建一个文本输入组件，它会在用户输入时自动更新组件中的数据。在 Vue2 中，我们需要使用 Prop 和 Emit 来实现同样的功能，而在 Vue3 中，我们可以使用响应式系统来实现。

// Vue2
<template>
  <input v-model="value">
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },

  emits: ['input'],

  methods: {
    handleInput(e) {
      this.$emit('input', e.target.value);
    },
  },
};
</script>

// Vue3
<template>
  <input v-model="value">
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');

    return {
      value,
    };
  },
};
</script>