avant-propos

  21 ce mois-ci, surtout la nuit avait l''air bien vivre, sentir Vue3.0 de plus en plus, et devrait être officiellement publié la mi-année, 3.0 changement est en effet une grande performance améliorée beaucoup, beaucoup de choses sont leurs yeux réagissent.Vous pouvez rapidement tourner Vue3 Pour.0 camp, et désormais au courant des nouvelles fonctionnalités est nécessaire.

  Si vous voulez v2.en utilisant 3 x.Le contenu de 0, peuvent être obtenus de la manière suivante

  NPM install ''@ vue / composition api''

  En général.js introduit

  importation VueCompositionApi de ''@ vue / composition api'';

  Vue.utilisation (VueCompositionApi);

  Deux voies de liaison de données

  V2.x liaison de données est réalisé dans les deux sens par un procédé de DefineProperty objet propriétés d''interception exploités par get et méthodes décrites dans.Mais il ne peut pas changer le tableau d''auditeurs, en plus d''utiliser les méthodes suivantes: push (), pop (), shift (), unshift (), épissure (), sort (), inverse (), si elle est utilisée comme un index de tableau ensemble lorsqu''un élément ne peut pas être modifié.

  V3.x dans la procuration et refléter l''utilisation à deux voies de liaison, il peut écouter les changements dans les objets de plusieurs aspects, en plus de l''ensemble et obtenir, offre également appliquer, setPrototypeOf, getPrototypeOf, deletePrototype, isExtensible, preventExtensions, getOwnPropertyDescriptor, DefineProperty , l''écoute, a ownKeys, les méthodes de construct.

  Pour proxy d''application pratique, je serai consacré à expliquer la période à la fin VU3.0 basé sur la pratique

  Des exemples de la livre directe

  

  ?

  ?

  

  

  Si vous êtes une première fois que vous voyez ce qui précède libellé peut être un peu étrange, qui est en Vue3.x dans le libellé.dans v2.x dans les données, les méthodes, calculées, montre, etc., v3.x, toutes écrites dans une configuration d''appel de fonction.Où l''on peut arbitrairement définir des variables, des fonctions, et enfin revenir par retour, le contenu retourné peut être utilisé dans le modèle.

  Pour les données liées à v3.x effectué une classification plus détaillée, il peut être divisé en trois éléments suivants:

  Caractère contraignant: var singleVal = 1, les données varient, mais la vue est pas mis à jour

  A deux sens unique de liaison: const doubleval = ref (1), en utilisant doubleval.changement de valeur

  Deux voies de liaison: la nécessité d''utiliser l''état réactif, l''utilisation.changement stateVal valeur

  Expliquons un par un:

  Caractère contraignant, écoutez le nom que vous pouvez savoir qu''il n''a pas caractéristiques de liaison à double sens ou la fonctionnalité, il ne sera obligatoire une fois lorsque la vue est initialisé, même si cette variable est modifiée en arrière, la vue est pas mis à jour.On peut voir à partir de la valeur de la console singleVal bien changé, mais l''interface est toujours présentée comme 1.La méthode des déclarations variables et nous déclarons généralement une variable, par exemple: laisser singleVal = 1, et enfin de retour dans le retour.

  Liaison unique dans les deux sens, vous ne pouvez déclarer une variable d''un liant dans les deux sens, créer un objet wrapper en fonction ref, pour y inclure une valeur de propriété réactive.L''exemple ci-dessus const doubleval = ref (1).Si vous souhaitez modifier ses besoins de valeur à modifier est la valeur de sa valeur de la propriété, comme celui-ci, comme doubleval.valeur++.

  Deux voies de liaison, créer un objet sensible par réactif, de sorte que l''objet est de ne pas créer un objet wrapper, il n''y a pas besoin d''utiliser.La valeur de la valeur, ce qui équivaut à 2 Vue.x La Vue.observable.

  

  état = réactif (const {

  stateVal: 1

  })

  revenir {

  .state

  }

  Une fois le contenu de deconstruction réactif retourné directement, peut entra?ner une perte sensible, la nécessité d''utiliser toRefs réactifs objets en objets communs, chaque attribut sur les résultats d''un tel point d''objet ref correspondant à la référence objet aux propriétés de l''objet, assure une sensibles n''est pas perdu lors de l''utilisation de l''objet opérateur en expansion ou déconstruit.

  Pour les méthodes d''événement, et vous déclarez une variable, comme dans la configuration de l''instruction, vous pouvez revenir en retour.

  propriété calculée

  Le procédé d''introduction calculée, la valeur renvoyée est calculée, en utilisant l''exemple ci-dessus où calcule ensuite le nombre 3 avec la somme de ce qui précède.

  import {calculé, ref, réactif, toRefs} de ''@ vue / composition api''

  défaut d''exportation {

  installer () {

  .

  const total = calculé (() => {

  retour singleVal + doubleval.+ valeur état.stateVal

  })

  .

  return{

  .,

  total

  }

  }

  }

  

  De l''effet de démonstration, nous pouvons voir que les données à sens unique des propriétés de liaison changement ne justifie pas la méthode de calcul.

  Ecouter des données

  Ou écrire dans la même configuration, mais aussi relativement simple, il n''y a rien à expliquer

  import {calculé, ref, réactif, toRefs, montre} de ''@ vue / composition api''

  .

  regarder (() => Etat.stateVal, (newVal, OLDVAL) => {

  console.log (newVal, OLDVAL);

  })

  .

  

  Cycle de la vie

  Vue3.0 et créé BeforeCreate annulé deux cycles, car avant cette configuration exécutera ce cycle, de sorte que vous pouvez gérer ce que vous avez besoin dans la configuration.Autre cycle de vie de tous commencer avec le.

  import {

  onBeforeMount,

  onMounted,

  onBeforeUnmount,

  onbeforeupdate,

  onDeactivated,

  onUnmounted,

  OnUpdated

  } from ''@vue/composition-api''

  export default {

  setup(){

  onBeforeMount (() => {

  console.log ( ''onBeforeMount'');

  })

  onMounted (() => {

  console.log ( ''onMounted'');

  })

  onBeforeUnmount (() => {

  console.log ( ''onBeforeUnmount'');

  })

  onbeforeupdate (() => {

  console.log ( ''onbeforeupdate'');

  })

  onDeactivated (() => {

  console.log ( ''onDeactivated'');

  })

  onUnmounted (() => {

  console.log ( ''onUnmounted'');

  })

  OnUpdated (() => {

  console.log ( ''OnUpdated'');

  })

  }

  }

  mixin

  Vue3.0 formule fonction API utilisée pour remplacer le mixin d''origine, mixin facilement conduire à la page d''introduction attributs nommés se chevauchent et couvrent mixin.

  en Vue3.0 présente sous la forme d''une API, lorsque vous avez besoin, qui est incorporé.regard direct sur un exemple

  mixin.vue

  

  ?

  

  

  searchName.js

  {import réactif, toRefs} de ''@ vue / composition api''

  ?

  fonction par défaut d''exportation searchName (noms) {

  const state=reactive({

  noms: noms,

  searchValue: ''''

  })

  const onSearch = () => {

  state.names.foreach (name => {

  name.show = nom.value.comprend (state.searchValue)

  })

  }

  return {

  .toRefs(state),

  onSearch

  }

  }

  Nous rechercherons ci-dessus dans un fichier séparé js.en searchName.Les propriétés définies js et méthodes, ayant les propriétés ici aussi sensibles, et enfin retourne le contenu.Dans l''ensemble, le premier à introduire ce fichier js, méthode appel searchName, en passant les paramètres requis.searchValue deux noms et données sensibles pas tous dans le même assemblage, mais de searchName.js par des présentations sont visibles ci-dessous, ils ont un propriétés sensibles.

  

  EventBus

  deux paramètres de configuration de réception

  accessoires: V2 égale à.x dans les accessoires: {}, les paramètres de réception du composant parent de transmission

  CTX: contexte.à 2 heures.x est un point dans cet exemple mondial de VUE, cela peut être utilisé.routeur, cette.routeur, cette.routeur, cette.engager, cette.émettre le routage comme et d''autres opérations sauter.dans 3.0 ne peut pas directement accès à cela, si vous essayez de sortie, vous le voir revenir la valeur est non définie.Mais peut CTX.racine.émettre le routage comme et d''autres opérations sauter.dans 3.0 ne peut pas directement accès à cela, si vous essayez de sortie, vous le voir revenir la valeur est non définie.Mais peut CTX.racine.émettre le routage comme et d''autres opérations sauter.dans 3.0 ne peut pas directement accès à cela, si vous essayez de sortie, vous le voir revenir la valeur est non définie.Mais peut CTX.racine.racine.$ Contenu Emit à accrocher dans la racine de $, de sorte que peut être consulté partout.

  configuration (accessoires, CTX) {

  .

  const total = calculé (() => {

  laissez total = singleVal + doubleval.+ valeur état.stateVal

  CTX.racine.$ racine.$ Emit ( ''handleClick'', {nombre: total})

  rendement total

  })

  .

  }

  .

  CTX.racine.$ racine.$ On ( ''handleClick'', (val) => {

  console.log (j''étais par CTX.racine.$ racine.$ Déclenché, les valeurs re?ues: ? + val.nombre);

  state.otherTotal = val.nombre

  })

  .

  Enfin, fixez le github de la composition api: https: // github.com / vuejs / composition-api

  Cet article sur vous prêt Vue3.0 article encore sur l''introduction à cela, et plus Vue3.0 S''il vous pla?t recherche maison script précédent article ou continuer à parcourir les articles connexes suivants dans l''avenir, nous espérons beaucoup de scripts de soutien Maison!

  Vous pouvez également être intéressé par l''article: Vue3 Sur la base.0.imitation de construction 1beta fournisseur d''électricité Jingdong H5 Projet sur Vue3.0 nouvelle version de la composition api Guide API 15 minutes dans la fosse pour commencer Vue3.0 (Résumé)

êtes-vous prêt pour Vue3.0 encore

Recommend Article: