Vue3+TS+Vite development tips: How to use Vue3 Composition API elegantly

Vue3 TS Vite development skills: How to use Vue3 Composition API elegantly

Introduction:
The launch of Vue3 has brought a series of changes to front-end development. One of the biggest changes is the introduction of the Composition API. Compared with the traditional Options API, the Composition API allows us to organize and manage our code more flexibly and efficiently. This article will introduce how to use Vue3 Composition API elegantly and combine TypeScript and Vite for project development.

1. Installation and initialization project
First, we need to install the latest version of Vue CLI, install it through the following command:

npm install -g @vue/cli

Next, we can use Vue CLI to create a new Project:

vue create my-project

When creating a project, we can choose TypeScript as the template of the project. If there is no choice, we can also add TypeScript support manually:

vue add @vue/typescript

Next, we can use Vite as the build tool of the project and install it through the following command:

npm init vite@latest my-vite-project -- --template vue-ts

In this way we successfully Installed and initialized a Vue3 TS Vite project.

2. Use Composition API
Using Composition API can better organize our code and improve our development efficiency. The following is a simple example to demonstrate how to use the Composition API.

1. Create a new component
   First, we can create a new component, such as HelloWorld.vue:

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
    const message = ref('Hello, World!');
   
    onMounted(() => {
      setTimeout(() => {
        message.value = 'Hello, Vue3!';
      }, 2000);
    });
   
    return {
      message,
    };
     },
   };
   </script>

In this In the example, we use the ref function in the Composition API to define a responsive data message, and modify the value of the message in the mounted hook function of the component.

2. Using components
   Next, use this component in our page:

   <template>
     <div>
    <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from './HelloWorld.vue';
   
   export default {
     components: {
    HelloWorld,
     },
   };
   </script>

Introduced the HelloWorld component into the page, and use it as a subcomponent.

3. Run the project
   Finally, we can run the project and see the effect:

   npm run dev

With this simple example, we can see Using the Composition API can organize our code more concisely and clearly.

3. Commonly used Composition API functions
In addition to the ref and onMounted functions introduced above, there are also some commonly used Composition API functions that can help us develop better.

1. reactive function
   The reactive function can convert a normal object into a responsive object and return a responsive proxy object. The example is as follows:

   import { reactive } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   console.log(state.count); // 输出：0
   
   state.count++;
   console.log(state.count); // 输出：1

In the above example, we use the reactive function to convert a normal object state into a reactive object, and access and modify it through state.count.

2. watch function
   The watch function can monitor changes in a responsive data and execute the corresponding callback function when the data changes. An example is as follows:

   import { ref, watch } from 'vue';
   
   const count = ref(0);
   
   watch(count, (newValue, oldValue) => {
     console.log(`count从${oldValue}变为${newValue}`);
   });
   
   count.value++; // 输出：count从0变为1

In the above example, we use the watch function to monitor changes in the count variable and output the corresponding log when the count changes.

3. toRefs function
   The toRefs function can convert the properties of a responsive object into a normal ref object and return a new object. The example is as follows:

   import { reactive, toRefs } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   const { count } = toRefs(state);
   
   console.log(count.value); // 输出：0
   
   count.value++;
   console.log(count.value); // 输出：1

   In the above example, we use the toRefs function to convert the count attribute in the state into a normal ref object, so that we can access and modify it through count.value .

   4. Summary
   The introduction of Vue3 Composition API makes our code more flexible and efficient, and can better organize and manage our code. This article introduces how to use the Vue3 Composition API and develop Vue3 projects with TypeScript and Vite. By understanding and mastering the use of Composition API, we can develop Vue3 projects more elegantly and improve our development efficiency.

   I hope this article can provide some help and guidance for you to use the Composition API in Vue3 project development. Happy programming!

   The above is the detailed content of Vue3+TS+Vite development tips: How to use Vue3 Composition API elegantly. For more information, please follow other related articles on the PHP Chinese website!