Composition API Best Practices in UniApp.

UniApp Composition API: A Hilarious Journey to Organized Code! 🚀

Alright, class! Settle down, settle down! Today, we’re diving headfirst into the wonderful, occasionally baffling, but ultimately glorious world of the Composition API in UniApp. Forget everything you think you know about Vue 2 (or even early Vue 3), because we’re about to embark on a journey to clean, maintainable, and dare I say, enjoyable code! 🤩

Think of this lecture as your coding guru, guiding you through the treacherous jungles of reactive data, component logic, and the eternal quest for "DRY" (Don’t Repeat Yourself) principles. We’ll explore best practices, common pitfalls, and sprinkle in a healthy dose of humor to keep things from getting too… well, codey.

I. Why Composition API? (Or: The Quest for Sanity)

Before we get our hands dirty, let’s answer the burning question: Why bother? Why abandon the familiar comfort of the Options API?

Imagine the Options API as a crowded apartment. Everything has its place: data, methods, computed, watch. But as your component grows, it becomes increasingly difficult to find anything! Related logic gets scattered across different sections, making it a nightmare to maintain and reuse. 😫

The Composition API, on the other hand, is like moving into a modern, minimalist loft. You can group related logic into reusable functions, called "composables," keeping your component clean, organized, and easy to navigate. Think of it as Marie Kondo-ing your code! ✨

Here’s a quick comparison:

Feature	Options API	Composition API
Organization	Scattered, predefined sections.	Grouped by logical concern.
Reusability	Limited, often requires mixins (yikes!).	Excellent, via composable functions.
Readability	Can become complex for large components.	More readable, especially for large components.
TypeScript	Can be challenging to type correctly.	Excellent TypeScript support.
Learning Curve	Relatively easier to pick up initially.	Steeper learning curve, but worth it! 💪

II. The Foundation: setup() and Reactive Data

The setup() function is the heart of the Composition API. It’s where you define your reactive data, computed properties, methods, and everything else that makes your component tick. Think of it as your component’s control center! 🕹️

Inside setup(), you’ll primarily use two key functions from Vue: ref() and reactive().

• ref(): Creates a reactive reference to a single value. Perfect for numbers, strings, booleans, or even objects/arrays when you only need to replace the entire object.

  import { ref } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
  
      function increment() {
        count.value++; // Access the value using .value
      }
  
      return {
        count,
        increment
      };
    }
  };

• reactive(): Creates a reactive proxy to an object. Changes to any property of the object will trigger updates.

  import { reactive } from 'vue';
  
  export default {
    setup() {
      const user = reactive({
        firstName: 'John',
        lastName: 'Doe'
      });
  
      function updateName(newFirstName) {
        user.firstName = newFirstName;
      }
  
      return {
        user,
        updateName
      };
    }
  };

Key Takeaways:

• Always access the value of a ref using .value. Forget .value and you’ll be staring at your screen wondering why nothing is updating. 🤦‍♂️
• Use reactive for complex objects with multiple properties that need to be reactive.
• setup() must return an object containing the values and functions you want to expose to the template. Think of it as your component’s public API. 🤝

III. Composable Functions: The Art of Code Reuse

This is where the magic truly happens! Composable functions are reusable pieces of logic that you can import and use in multiple components. Think of them as Lego bricks for your code. 🧱

Here’s a simple example of a composable that fetches data from an API:

// useFetchData.js
import { ref, onMounted } from 'vue';

export function useFetchData(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(true);

  async function fetchData() {
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  }

  onMounted(fetchData); // Fetch data when the component is mounted

  return {
    data,
    error,
    loading
  };
}

Now, you can use this composable in any component:

<template>
  <view>
    <view v-if="loading">Loading...</view>
    <view v-else-if="error">Error: {{ error.message }}</view>
    <view v-else>
      <text>Data: {{ data }}</text>
    </view>
  </view>
</template>

<script>
import { useFetchData } from '@/composables/useFetchData';

export default {
  setup() {
    const { data, error, loading } = useFetchData('https://jsonplaceholder.typicode.com/todos/1');

    return {
      data,
      error,
      loading
    };
  }
};
</script>

Best Practices for Composable Functions:

• Naming Convention: Start the name with use (e.g., useFetchData, useGeolocation). This makes it clear that it’s a composable function.
• Single Responsibility: Each composable should focus on a single, well-defined task.
• Reactivity: Return reactive values (refs or reactive objects) so that changes within the composable automatically update the component.
• Lifecycle Hooks: Use lifecycle hooks (e.g., onMounted, onUnmounted) within the composable if necessary.
• Composition: Composables can call other composables! This allows you to create complex logic by combining smaller, reusable pieces. Imagine a Voltron of code! 🤖

IV. Lifecycle Hooks: Your Component’s Milestones

The Composition API provides equivalents to the Options API’s lifecycle hooks, but with a slightly different syntax. They are functions that you import from Vue and call within setup().

Here’s a table summarizing the key lifecycle hooks:

Options API	Composition API	Description
beforeCreate	(Not directly available)	Logic that ran before beforeCreate in Options API can usually be placed directly inside setup().
created	(Not directly available)	Logic that ran before created in Options API can usually be placed directly inside setup().
beforeMount	onBeforeMount	Called right before the component is about to be mounted.
mounted	onMounted	Called after the component has been mounted. Perfect for fetching data, setting up event listeners, or interacting with the DOM.
beforeUpdate	onBeforeUpdate	Called right before the component is about to update.
updated	onUpdated	Called after the component has updated. Be careful to avoid infinite loops by only performing DOM manipulations conditionally.
beforeUnmount	onBeforeUnmount	Called right before the component is about to be unmounted.
unmounted	onUnmounted	Called after the component has been unmounted. Essential for cleaning up resources, such as removing event listeners or canceling timers. Think of it as cleaning your room before you move out! 🧹
onErrorCaptured	onErrorCaptured	Called when an error from a descendant component is captured. Useful for error logging or displaying fallback UI.
onRenderTracked	onRenderTracked	Called when a reactive dependency is tracked during a component’s render. Useful for debugging performance issues. (Advanced!)
onRenderTriggered	onRenderTriggered	Called when a dependency causes a component to re-render. Useful for debugging performance issues. (Advanced!)
onActivated	onActivated	Called when a <keep-alive> component is activated.
onDeactivated	onDeactivated	Called when a <keep-alive> component is deactivated.

Example:

import { ref, onMounted, onUnmounted } from 'vue';

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

    onMounted(() => {
      intervalId = setInterval(() => {
        count.value++;
      }, 1000);
    });

    onUnmounted(() => {
      clearInterval(intervalId); // Clean up the interval when the component is unmounted
    });

    return {
      count
    };
  }
};

V. Computed Properties and Watchers: Reactivity Superpowers

Computed properties and watchers are essential for creating reactive and dynamic components.

• Computed Properties: Derived values that automatically update when their dependencies change. Think of them as smart variables that always stay up-to-date. 🧠

  import { ref, computed } from 'vue';
  
  export default {
    setup() {
      const firstName = ref('John');
      const lastName = ref('Doe');
  
      const fullName = computed(() => `${firstName.value} ${lastName.value}`);
  
      return {
        firstName,
        lastName,
        fullName
      };
    }
  };

• Watchers: Allow you to react to changes in a specific reactive value. Useful for performing side effects, such as making API calls or updating the DOM. Use with caution, as overuse can lead to spaghetti code! 🍝

  import { ref, watch } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
  
      watch(
        count,
        (newValue, oldValue) => {
          console.log(`Count changed from ${oldValue} to ${newValue}`);
          // Perform a side effect here, like making an API call
        }
      );
  
      return {
        count
      };
    }
  };

Key Considerations:

• Use computed properties for derived values that are used in the template.
• Use watchers for side effects that need to be performed when a reactive value changes.
• Be mindful of the performance implications of watchers, especially when watching complex objects.
• For more complex watching scenarios, consider using watchEffect for immediate and automatic dependency tracking.

VI. Template Refs: Accessing DOM Elements

Sometimes, you need to directly access a DOM element in your component. This is where template refs come in.

1. Add a ref attribute to the element in your template:

   <template>
     <input type="text" ref="myInput">
   </template>

2. Create a ref in setup() with the same name:

   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
       const myInput = ref(null); // Initialized to null
   
       onMounted(() => {
         myInput.value.focus(); // Access the DOM element after the component is mounted
       });
   
       return {
         myInput
       };
     }
   };

Important Notes:

• The ref will initially be null until the component is mounted.
• Access the DOM element using myInput.value.
• Use template refs sparingly. Try to avoid direct DOM manipulation whenever possible, and rely on reactive data and data binding instead.

VII. TypeScript Integration: Level Up Your Code!

The Composition API shines when combined with TypeScript. TypeScript provides static typing, which helps you catch errors early and improves code maintainability. Think of it as a coding superpower! 🦸‍♀️

Here’s an example of a composable function with TypeScript:

// useCounter.ts
import { ref, Ref } from 'vue';

interface UseCounterOptions {
  initialValue?: number;
  step?: number;
}

export function useCounter(options: UseCounterOptions = {}): {
  count: Ref<number>;
  increment: () => void;
  decrement: () => void;
} {
  const { initialValue = 0, step = 1 } = options;
  const count = ref(initialValue);

  function increment() {
    count.value += step;
  }

  function decrement() {
    count.value -= step;
  }

  return {
    count,
    increment,
    decrement
  };
}

Benefits of Using TypeScript:

• Early Error Detection: Catch type errors during development, before they make it to production.
• Improved Code Readability: Type annotations make your code easier to understand.
• Enhanced Code Maintainability: Refactoring becomes safer and easier.
• Better IDE Support: TypeScript provides better code completion and error checking in your IDE.

VIII. Common Pitfalls and How to Avoid Them

The Composition API is powerful, but it’s not without its potential pitfalls. Here are a few common mistakes to watch out for:

• Forgetting .value: This is the most common mistake! Always remember to access the value of a ref using .value.
• Overusing Watchers: Watchers can be tempting, but they can also lead to performance issues and complex logic. Consider using computed properties instead whenever possible.
• Mutating Reactive Objects Directly: Avoid directly mutating reactive objects. Use methods to update their properties, ensuring reactivity is maintained.
• Not Cleaning Up Resources: Always clean up resources in onUnmounted, such as removing event listeners or canceling timers. Failing to do so can lead to memory leaks. 😱
• Over-Complicating Composables: Keep composables focused on a single responsibility. Avoid creating overly complex composables that are difficult to understand and reuse.

IX. UniApp Specific Considerations

While the Composition API is largely framework-agnostic within the Vue ecosystem, UniApp has some unique considerations:

• this Context: Unlike the Options API, this inside setup() is not the component instance. Don’t try to access properties or methods from the Options API using this. Instead, explicitly import and use them or refactor them into composables.
• UniApp APIs: Access UniApp-specific APIs (like uni.request, uni.navigateTo) directly. There’s no special integration required.
• Component Instance Proxying: Be aware that UniApp (like Vue 3) uses proxies for reactive objects. This means you don’t need to use Vue.set or Vue.delete to add or remove properties. Just use standard JavaScript syntax.

X. Conclusion: Embrace the Composition API!

The Composition API is a powerful tool that can help you write cleaner, more maintainable, and more reusable code in UniApp. It might seem daunting at first, but with practice and a clear understanding of the core concepts, you’ll be writing beautiful, organized code in no time! 🎨

Remember, the key is to embrace the principles of composition, reusability, and single responsibility. Think of your code as a well-organized kitchen, where everything has its place and you can easily find what you need.

Now go forth and conquer the world of UniApp with the power of the Composition API! You got this! 💪