Explication détaillée des fonctions Vue3 : vous permet de démarrer rapidement avec le développement de Vue3

Vue3 est la dernière version du framework Vue Par rapport à Vue2, il présente de grandes améliorations en termes de performances, d'API, de prise en charge de TypeScript, etc. Par conséquent, Vue3 est devenu un sujet brûlant dans le développement front-end. En tant que développeur front-end, si vous souhaitez maîtriser les compétences de développement de Vue3, vous devez alors comprendre et maîtriser les fonctions qu'il contient. Cet article présentera les fonctions courantes de Vue3 afin que vous puissiez démarrer rapidement le développement de Vue3.

1. createApp

createApp

createApp()是在Vue3.0中引入的新函数。该函数的作用是创建Vue应用程序实例，并返回该实例。createApp()函数可以接收一个组件、模板和配置对象，用来定义Vue应用程序。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

2. mount

mount()函数用于将应用程序实例挂载到DOM元素上。在Vue3中，应用程序实例可以使用mount()方法来绑定到一个元素上。当DOM元素被挂载到页面上时，应用程序就可以开始渲染。

app.mount('#app');

可以看到，mount()函数接收一个CSS选择器或者一个DOM元素作为参数，该参数定义应用程序要绑定的元素。

3. props

props函数用于传递组件之间的数据。在Vue3中，组件的属性变得更加清晰和明确。开发者可以使用props选项来指定组件的属性和它们的类型。下面是一个使用props选项的例子：

export default {
  props: {
    name: String,
    age: Number
  }
}

可以看到，我们在组件选项中的props值中定义了一个name和age属性。这意味着当我们使用此组件时，我们需要通过属性传递name和age的值。

<my-component name="John" age="25"></my-component>

4. setup

setup()函数是一种新的组件API，用于定义组件的行为。在Vue3中，setup()函数与Vue2中的data()函数类似，但它提供了更多的灵活性，可以使用新的语法和Vue3的响应式系统来实现更好的性能。下面是一个简单的例子：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    }
  }
}

可以看到，我们在setup()函数中使用了Vue3的reactive()函数，它可以使state对象成为响应式对象。通过这种方式，我们可以对state中的属性进行修改，Vue会自动更新相关的视图。除了响应式之外，我们还可以在setup()函数中定义其他函数和变量，并将它们返回给父组件。

5. watch

watch()函数用于监听组件数据的变化。它可以监听一些特定的数据，当这些数据发生改变时，会执行相应的函数。watch()函数可以接收两个参数，第一个参数是我们要监听的数据，第二个参数是当这些数据发生变化时要执行的函数。下面是一个使用watch()函数的例子：

import { watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    watch(() => state.count, (newVal, oldVal) => {
      console.log(`New Value: ${newVal}, Old Value: ${oldVal}`);
    });

    return {
      state
    }
  }
}

这里我们使用Vue3的watch函数来监听state.count的变化。当state.count发生变化时，会执行传递给watch()函数的回调函数，并输出新旧值的日志信息。

6. computed

computed函数是计算属性的新API。在Vue3中，我们可以使用computed函数来定义计算属性。计算属性是基于依赖的响应式属性，当其依赖的数据发生变化时，它会自动重新计算。下面是一个使用computed函数的例子：

import { computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      height: 180,
      weight: 75
    });

    const bmi = computed(() => state.weight / (state.height / 100) ** 2);
    
    return {
      state,
      bmi
    }
  }
}

这里我们使用Vue3的computed函数来定义一个计算属性bmi，并在返回的结果中返回给父组件。通过这种方式，我们可以将计算属性的计算逻辑转移到组件外部。当state.height和state.weight的值发生变化时，我们不需要手动重新计算bmi的值，Vue会自动帮我们完成这个任务。

7. ref

ref()函数是Vue3中的新API，用于创建一个响应式引用。在Vue3中，使用ref()函数可以将任何值包装成一个响应式值。下面是一个使用ref()函数的例子：

import { ref } from 'vue';

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

    return {
      count
    }
  }
}

这里我们将count变量包装成了一个响应式引用，这意味着当我们修改count的值时，Vue会自动更新相关的视图。

8. toRefs

toRefs()函数是Vue3中的另一个新API，用于创建一个响应式引用对象。在Vue3中，当我们使用ref()函数创建一个响应式引用时，我们无法直接通过解构获取其值。这时，我们可以使用Vue3的toRefs()函数，将响应式引用对象转换成一个对象，以便我们可以通过解构直接获取它的值。下面是一个使用toRefs()createApp() a été introduit dans la nouvelle fonction de Vue3.0 . La fonction de cette fonction est de créer une instance d'application Vue et de renvoyer cette instance. La fonction createApp() peut recevoir un composant, un modèle et un objet de configuration pour définir une application Vue.

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: 'John',
      age: 25
    });

    return {
      ...toRefs(state)
    }
  }
}

#🎜🎜#mount

#🎜🎜#mount() est utilisée Montez l'instance d'application sur l'élément DOM. Dans Vue3, les instances d'application peuvent être liées à un élément à l'aide de la méthode mount(). Lorsque l'élément DOM est monté sur la page, l'application peut démarrer le rendu. #🎜🎜#rrreee#🎜🎜#Comme vous pouvez le constater, la fonction mount() reçoit un sélecteur CSS ou un élément DOM en paramètre, qui définit l'élément à lier par l'application. #🎜🎜#

#🎜🎜#props

#🎜🎜#props la fonction est utilisée pour transmettre des composants données entre. Dans Vue3, les propriétés des composants deviennent plus claires et explicites. Les développeurs peuvent utiliser l'option props pour spécifier les propriétés des composants et leurs types. Voici un exemple d'utilisation de l'option props : #🎜🎜#rrreee#🎜🎜#Comme vous pouvez le voir, nous avons défini un dans la valeur <code>props dans les options du composant, les attributs >name et age. Cela signifie que lorsque nous utilisons ce composant, nous devons transmettre les valeurs de name et age via les propriétés. #🎜🎜#rrreee

#🎜🎜#setup

#🎜🎜#setup()La fonction est a Une nouvelle API de composant pour définir le comportement des composants. Dans Vue3, la fonction setup() est similaire à la fonction data() dans Vue2, mais elle offre plus de flexibilité pour utiliser la nouvelle syntaxe et le système Responsive de Vue3 pour de meilleures performances. . Ce qui suit est un exemple simple : #🎜🎜#rrreee#🎜🎜#Comme vous pouvez le voir, nous utilisons la fonction reactive() de Vue3 dans la fonction setup() It. peut rendre les objets state réactifs. De cette façon, nous pouvons modifier les propriétés dans state et Vue mettra automatiquement à jour les vues associées. En plus de la réactivité, nous pouvons également définir d'autres fonctions et variables dans la fonction setup() et les renvoyer au composant parent. #🎜🎜#

#🎜🎜#watch

#🎜🎜#watch() est utilisée pour surveiller les changements dans les données des composants. Il peut surveiller certaines données spécifiques et exécuter les fonctions correspondantes lorsque les données changent. La fonction watch() peut recevoir deux paramètres. Le premier paramètre est les données que nous voulons surveiller, et le deuxième paramètre est la fonction à exécuter lorsque les données changent. Voici un exemple d'utilisation de la fonction watch() : #🎜🎜#rrreee#🎜🎜#Ici, nous utilisons la fonction watch de Vue3 pour surveiller state.count changements. Lorsque <code>state.count change, la fonction de rappel transmise à la fonction watch() sera exécutée et les informations de journal des anciennes et des nouvelles valeurs seront affichées. #🎜🎜#

#🎜🎜#calculé

#🎜🎜#La fonction calculée est une nouvelle méthode de API de propriétés calculées. Dans Vue3, nous pouvons utiliser la fonction computed pour définir les propriétés calculées. Les propriétés calculées sont des propriétés réactives basées sur les dépendances qui sont automatiquement recalculées lorsque les données dont elles dépendent changent. Voici un exemple d'utilisation de la fonction calculée : #🎜🎜#rrreee#🎜🎜#Ici, nous utilisons la fonction calculée de Vue3 pour définir une propriété calculée bmi, et renvoyez-le au composant parent dans le résultat renvoyé. De cette façon, nous pouvons déplacer la logique de calcul de la propriété calculée en dehors du composant. Lorsque les valeurs de <code>state.height et state.weight changent, nous n'avons pas besoin de recalculer manuellement la valeur de bmi, Vue le fera aidez-nous automatiquement à terminer cette tâche. #🎜🎜#

#🎜🎜#ref

#🎜🎜#ref() la fonction est dans Vue3 Une nouvelle API pour créer une référence réactive. Dans Vue3, utilisez la fonction ref() pour envelopper n'importe quelle valeur dans une valeur réactive. Voici un exemple d'utilisation de la fonction ref() : #🎜🎜#rrreee#🎜🎜#Ici, nous enveloppons la variable count dans une référence réactive, ce qui signifie Quand nous modifions la valeur de count, Vue mettra automatiquement à jour les vues associées. #🎜🎜#

#🎜🎜#toRefs

#🎜🎜#toRefs() la fonction est dans Vue3 Une autre nouvelle API pour créer un objet de référence réactif. Dans Vue3, lorsque nous utilisons la fonction ref() pour créer une référence réactive, nous ne pouvons pas obtenir directement sa valeur par déstructuration. À ce stade, nous pouvons utiliser la fonction toRefs() de Vue3 pour convertir l'objet de référence réactif en un objet afin que nous puissions directement obtenir sa valeur par déstructuration. Voici un exemple d'utilisation de la fonction toRefs() : #🎜🎜#

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: 'John',
      age: 25
    });

    return {
      ...toRefs(state)
    }
  }
}

可以看到，我们使用Vue3的toRefs()函数将响应式对象state转换成了一个响应式引用对象，然后我们使用对象的解构语法来提取state的属性。

总结：

以上就是Vue3.0常用的函数，这些函数对于Vue3开发非常重要。学会这些函数，可以让你更好地了解Vue3的开发方式，更快地掌握Vue3的开发技能。希望本文对你学习Vue3有所帮助。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!