Quelle est la différence entre la liaison bidirectionnelle vue2 et vue3 ?

La différence entre la liaison bidirectionnelle dans vue2 et vue3 est la suivante : vue2 utilise l'objet "Object.defineProperty" et le détournement des propriétés de l'objet pour obtenir une liaison bidirectionnelle tandis que la réactivité dans vue3 utilise la méthode "Proxy" dans ES6 ; pour parvenir à une liaison bidirectionnelle, certainement.

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelle est la différence entre la liaison bidirectionnelle de vue2 et vue3 ?

Problèmes avec la liaison de données bidirectionnelle de Vue2 :

                                                                                                                                                                                                                              .利 À propos du tableau : vous ne pouvez pas utiliser l'index pour configurer directement un élément du tableau, ni modifier la longueur du tableau.

Vue2.0

Principe : en utilisant l'objet Object.defineProperty et le mode détournement + publication-abonnement des propriétés de l'objet, tant que les données changent, il notifiera directement le changement et pilotera la mise à jour de la vue.

Grammaire :

Object.defineProperty(obj, "name", { get:()=> {}, set:()=> {})

Paramètre un : obj : détourner un objet, paramètre deux : "name": attribut d'objet détourné, paramètre trois : ajouter des méthodes set et get aux attributs

Exemple :

 let obj = { name: "tom", age: 10 };
    Object.defineProperty(obj, "name", {
      get: () => {
        console.log("访问了name属性");
      },
      set: (newVule) => {
        console.log("设置了name属性");
      },
    });
    obj.name; //触发get
    obj.name = "jack";//触发set

Vue3.0

Principe : La réactivité de Vue3.0 utilise la méthode Proxy d'ES6. Les objets proxy sont utilisés pour définir des comportements personnalisés pour les opérations de base (telles que la recherche d'attributs, l'affectation, l'énumération, l'appel de fonction, etc.)

Syntaxe :

let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})

Paramètre un : cible : détourner un objet, paramètre deux : prop : propriétés d'un objet détourné , Paramètre trois : vide : nouvelle valeur d'attribut, p : lui-même

Exemple :

   // vue3
    let p = new Proxy(obj, {
      get: (target, prop, p) => {
        console.log("获取");
        return prop in target ? target[prop] : "默认值";
      },
      set: (target, prop, vaule, p) => {
        console.log("设置");
        target[prop] = vaule;
      },
    });
    console.log(p.name); //访问了name属性
    console.log((p.name = "java")); //设置了name属性

Résumé :

vue2 détourne chaque propriété de l'objet via Object.defineProperty

vue3 détourne chaque propriété de l'objet via Proxy An attribut

[Recommandation associée : "

tutoriel vue.js

"]

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!