在 Vue 3.0 中,组合(Composition)是一种新的 API,被称为 Composition API。它为组件提供了一种更灵活、更可组合的方式来组织和重用逻辑。与 Vue 2.x 的选项式 API 相比,Composition API 使得组件的代码更易读、易维护,并且更容易将逻辑进行组合。下面让我们来了解 Vue 3.0 中的组合。

1. setup 函数

在 Vue 3.0 中,使用 setup 函数来配置组件。setup 函数会在组件创建之前被调用,并且是 Composition API 的入口。
<script>
export default {
  setup() {
    // 在这里配置组件
  },
};
</script>

2. 响应式数据

使用 ref 和 reactive 函数创建响应式数据。

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

export default {
  setup() {
    const count = ref(0);

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

2.2 reactive
<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue 3.0!',
      count: 0,
    });

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

3. 生命周期钩子

使用 onMounted、onUpdated、onBeforeUnmount 等函数来替代生命周期钩子。
<script>
import { ref, onMounted, onUpdated, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component is mounted');
    });

    onUpdated(() => {
      console.log('Component is updated');
    });

    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

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

4. 计算属性

使用 computed 函数来创建计算属性。
<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const squaredCount = computed(() => {
      return count.value * count.value;
    });

    return {
      count,
      squaredCount,
    };
  },
};
</script>

5. 方法

通过直接在 setup 函数中定义方法。
<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increaseCount = () => {
      count.value++;
    };

    return {
      count,
      increaseCount,
    };
  },
};
</script>

6. 外部传递属性

通过 props 对象接收外部传递的属性。
<script>
export default {
  props: ['message'],
  setup(props) {
    return {
      message: props.message,
    };
  },
};
</script>

7. 组合逻辑

将逻辑进行组合,可以通过将不同的逻辑提取为函数,然后在 setup 中调用这些函数。
<script>
import { ref } from 'vue';

function useCounter() {
  const count = ref(0);

  const increaseCount = () => {
    count.value++;
  };

  return {
    count,
    increaseCount,
  };
}

export default {
  setup() {
    const { count, increaseCount } = useCounter();

    return {
      count,
      increaseCount,
    };
  },
};
</script>

总体来说,Composition API 提供了一种更灵活、可组合的方式来组织和重用组件逻辑。通过 setup 函数,我们可以更清晰地组织组件内的代码,而不再受到选项的限制。


转载请注明出处:http://www.zyzy.cn/article/detail/571/Vue 3.0