Quels sont les trois éléments de la directive vue ?

Les trois éléments de la directive vue sont la réactivité, le moteur de modèle et le rendu. La réactivité signifie que lorsque des données sont mises à jour ou ajoutées, la page répondra et les données correspondantes seront restituées ; le moteur de modèle est essentiellement une chaîne, utilisée comme identifiant de l'instance. Le rendu fait référence au processus de conversion du modèle en ; d'autres codes.

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

Quels sont les trois éléments de la directive vue ?

Trois éléments dans veu

• Réactivité : comment vue surveille-t-elle chaque changement d'attribut de données ?

• Moteur de modèles : comment le modèle de vue est-il analysé et comment la directive est-elle traitée ?

• Rendu : Comment le modèle de vue est-il rendu en HTML ? Et le processus de rendu

vue est implémenté en responsive

Object.defineProperty

Simulation

1) Qu'est-ce qui est réactif

Après la modification des données attribut , vue surveille immédiatement la propriété

data et est proxy vers la machine virtuelle

2) Object.defineProperty

Syntaxe :

Object.defineProperty(obj, prop, descriptor)

Description du paramètre :

• obj : obligatoire. Objet cible

• prop : Obligatoire. Le nom de l'attribut à définir ou à modifier

• descripteur : obligatoire. Les caractéristiques de l'attribut cible

Basic

var obj = {
  name: 'zhangsan',
  age: 25
}
 
console.log(obj.name); // 获取属性的时候，如何监听
obj.age = 26; // 赋值属性的时候，如何监听

Nous utilisons la méthode DefinProperty pour implémenter l'opération ci-dessus : comme suit

var obj = {}
 
var name = 'zhangsan'
 
Object.defineProperty(obj, "name", {
  get: function () {
    console.log('get');
    return name;
  },
  set: function (newVal) {
    console.log('set');
    name = newVal;
  }
});
 
console.log(obj.name); // 可以监听到
obj.name = 'lisi'; // 可以监听到

En utilisant DefineProperty, nous pouvons surveiller les modifications des données. C'est également la méthode principale permettant à vue d'effectuer un travail de réponse.

3) Comment simuler le modèle de

var mv = {}
 
var data = {
  price: 100,
  name: 'zhangsan'
}
 
var key, value;
for (key in data) {
 
  // 命中闭包。新建一个函数，保证 key 的独立的作用域
  (function (key) {
Object.defineProperty(mv, key, {
  get: function () {
    console.log('get');
    return data[key];
  },
  set: function (newVal) {
    console.log('set');
    data[key] = newVal
  }
})
  })(key);
}

vue est analysé

Quel est le modèle

Fonction de rendu

Fonction de rendu et vdom

1) Quel est le modèle

Essence : String

a une logique, comme v-if v-for, etc.

est très similaire au format html, mais il y a une grande différence

Il sera éventuellement converti en html pour l'affichage

Le modèle doit éventuellement être converti en code JS, car :

a une logique (v-if v-for), il doit être réalisé avec JS (Turing complet)

La conversion en page de rendu html doit être réalisée avec JS

Par conséquent, le plus important est pour convertir le modèle en fonction JS

Exemple de base

 <div id="app">
    <div>
      <input v-model="title">
      <button v-on:click="add">submit</button>
    </div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>

Ce qui précède est un modèle.

【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!