Explication détaillée du principe de réactivité de Vue.js-js tutoriel-php.cn

Table des matières

et simplement fusionner leurs valeurs : " > et simplement fusionner leurs valeurs :

Maison

interface Web

js tutoriel

Explication détaillée du principe de réactivité de Vue.js

小云云

Feb 10, 2018 pm 01:59 PM

javascript vue.js 详解

Je viens d'un milieu Java. Lorsque je suis entré en contact avec JavaScript pour la première fois il y a de nombreuses années, c'était un peu bizarre car il n'avait pas de <code>gettersgetters et setterssettersgetter. Au fil du temps, j'ai commencé à aimer cette fonctionnalité manquante en raison du grand nombre de getterssetter et setter

, ce qui rend le code plus concis. Par exemple, regardons le code Java suivant :

<span style="font-size: 14px;">class Person{<br/>    String firstName;<br/>    String lastName;    // 这个Demo中省略了一些构造器代码 :)    public void setFirstName(firstName) {        this.firstName = firstName;<br/>    }    public String getFirstName() {        return firstName;<br/>    }    public void setLastName(lastName) {        this.lastName = lastName;<br/>    }    public String getLastName() {        return lastName;<br/>    }<br/>}// Create instancePerson bradPitt = new Person();<br/>bradPitt.setFirstName("Brad");<br/>bradPitt.setLastName("Pitt");<br/></span>

Copier après la connexion

Les développeurs JavaScript ne feraient jamais ça, mais plutôt ceci :

<span style="font-size: 14px;">var Person = function () {};var bradPitt = new Person();<br/>bradPitt.firstName = &#39;Brad&#39;;<br/>bradPitt.lastName = &#39;Pitt&#39;;<br/></span>

Copier après la connexion

Ceci est beaucoup plus simple. Habituellement, la simplicité est préférable, n'est-ce pas ?

C'est vrai, mais parfois je souhaite obtenir des propriétés qui peuvent être modifiées, mais je n'ai pas besoin de savoir quelles sont ces propriétés. Par exemple, nous étendons une nouvelle méthode <code>getFullName()getFullName() en code Java :

<span style="font-size: 14px;">class Person{    private String firstName;    private String lastName;    // 这个Demo中省略了一些构造器代码 :)    public void setFirstName(firstName) {        this.firstName = firstName;<br/>    }    public String getFirstName() {        return firstName;<br/>    }    public void setLastName(lastName) {        this.lastName = lastName;<br/>    }    public String getLastName() {        return lastName;<br/>    }    public String getFullName() {        return firstName + " " + lastName;<br/>    }<br/>}<br/><br/>Person bradPitt = new Person();<br/>bradPitt.setFirstName("Brad");<br/>bradPitt.setLastName("Pitt");// Prints &#39;Brad Pitt&#39;System.out.println(bradPitt.getFullName());<br/></span>

Copier après la connexion

Dans l'exemple ci-dessus, fullNamefullName

est une propriété calculée, qui n'est pas une propriété privée mais renvoie toujours le résultat correct.

C# et getters/setters implicites

<code>gettersJetons un coup d'œil à l'une des fonctionnalités C# : Implicit getterssetters/<code>getterssetters, j'aime beaucoup. En C#, si besoin, vous pouvez définir des setters<code>gettersgetter/setterssetter , mais vous n'êtes pas obligé de le faire, mais si vous décidez de le faire, l'appelant n'est pas obligé d'appeler la fonction. L'appelant n'a qu'à accéder directement à la propriété, getter<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>public class Foo { public string FirstName {get; set;} public string LastName {get; set;} public string FullName {get { return firstName + " " + lastName }; private set;} } </pre><div class="contentsignin">Copier après la connexion</div></div>

/setter

s'exécutera automatiquement en fonction hook :

<span style="font-size: 14px;">var person0 = {<br/>    firstName: &#39;Bruce&#39;,<br/>    lastName: &#39;Willis&#39;,<br/>    fullName: &#39;Bruce Willis&#39;,<br/>    setFirstName: function (firstName) {        this.firstName = firstName;        this.fullName = `${this.firstName} ${this.lastName}`;<br/>    },<br/>    setLastname: function (lastName) {        this.lastName = lastName;        this.fullName = `${this.firstName} ${this.lastName}`;<br/>    },<br/>};<br/>console.log(person0.fullName);<br/>person0.setFirstName(&#39;Peter&#39;);<br/>console.log(person0.fullName);<br/></span>

Copier après la connexion

Je pense que c'est cool...

<span style="font-size: 14px;">"Bruce Willis"<br/>"Peter Willis"<br/></span>

Copier après la connexion

Maintenant, si je veux en JavaScript Je perdrais beaucoup de temps à implémenter une fonction similaire, comme :

setXXX(value) Cela imprimerait :

mais utiliser

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;span style=&quot;font-size: 14px;&quot;&gt;var person1 = {&lt;br/&gt;    firstName: &amp;#39;Brad&amp;#39;,&lt;br/&gt;    lastName: &amp;#39;Pitt&amp;#39;,&lt;br/&gt;    getFullName: function () {        return `${this.firstName} ${this.lastName}`;&lt;br/&gt;    },&lt;br/&gt;};&lt;br/&gt;console.log(person1.getFullName()); // 打印 &quot;Brad Pitt&quot;&lt;br/&gt;&lt;/span&gt;</pre><div class="contentsignin">Copier après la connexion</div></div>setXXX(value)<p>

n'est pas assez 'JavaScripty' (c'est une blague). getterLa manière suivante peut résoudre ce problème : firstlast nameMaintenant, nous revenons au

</p> calculé getter<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;span style=&quot;font-size: 14px;&quot;&gt;person1.firstName = &amp;#39;Peter&amp;#39;person1.getFullName(); // 返回 &quot;Peter Pitt&quot;&lt;br/&gt;&lt;/span&gt;</pre><div class="contentsignin">Copier après la connexion</div></div>

. Vous pouvez définir le prénom<code>getxxx() ou le nom de famille<h2 id="code-span-style-font-size-px-et-simplement-fusionner-leurs-valeurs-span"> et simplement fusionner leurs valeurs :

C'est effectivement plus pratique, mais je n'aime toujours pas ça car il faut définir un code appelé data()getxxx() 

méthode, qui n'est pas non plus assez 'JavaScripty'. Depuis de nombreuses années, je réfléchis à la manière de mieux utiliser JavaScript.

<span style="font-size: 14px;">var vm = new Vue({<br/>    data() {<br/>        return {<br/>        greeting: &#39;Hello world!&#39;,<br/>        };<br/>    }<br/>})<div>{greeting}</div><br/></span>

Copier après la connexion

Puis Vue est apparue“Hello world!”

Dans ma chaîne Youtube, de nombreuses vidéos liées aux tutoriels Vue sont mentionnées. Je suis habitué au développement réactif, dans. à l'époque d'Angular1, nous l'appelions : Data Binding. Cela a l'air simple. Il vous suffit de définir quelques données dans le bloc

data()greeting de votre instance Vue et de la lier au HTML :

<span style="font-size: 14px;">methods: {<br/>    onSomethingClicked() {        this.greeting = "What&#39;s up";<br/>    },<br/>}<br/></span>

Copier après la connexion

Évidemment, il affichera "Bonjour tout le monde !"<code>setInterval dans l'interface utilisateur.

Maintenant, si vous modifiez la valeur de gettersalutation, le moteur Vue y réagira et se comportera en conséquence, mettre à jour la vue. setter

<🎜>Pendant longtemps je me demandais, comment ça marche ? Un événement est déclenché lorsque les propriétés d'un objet changent ? Ou est-ce que Vue continue d'appeler <🎜><🎜>setInterval<🎜><🎜> pour vérifier s'il est mis à jour ? <🎜><🎜><🎜><🎜>En lisant la documentation officielle de Vue, j'ai appris que la modification d'une propriété d'objet appellera implicitement <🎜><🎜>getter<🎜><🎜> / <🎜><🎜>setter<🎜><🎜>, notifie à nouveau l'observateur, puis déclenche le nouveau rendu, comme indiqué ci-dessous, cet exemple provient de la documentation officielle de Vue.js : <🎜 ><🎜 >

Explication détaillée du principe de réactivité de Vue.js

但我还想知道：

怎么让数据自带getter/setters？
这些隐式调用内部是怎样的？

第一个问题很简单：Vue为我们准备好了一切。当你添加新数据，Vue将会通过其属性为其添加 getter/setters。但是我让 foo.bar = 3? 会发生什么？

这个问题的答案出现在我和SVG & Vue专家Sarah Drasner的Twitter对话中：

Explication détaillée du principe de réactivité de Vue.js

Timo: foo.bar=value;是怎么做到实时响应的？
Sarah: 这个问题很难在Twitter说清楚，可以看这篇文章
Timo: 但这篇文章并没有解释上面提到的问题。
Timo: 它们就像：分配一个值->调用setter->通知观察者，不理解为什么在不使用setInterval和Event的情况下，setter/getter就存在了。
Sarah: 我的理解是：你获取的所有数据都在Vue实例data{}中被代理了。

显然，她也是参考的官方文档，之前我也读过，所以我开始阅读Vue源码，以便更好的理解发生了什么。过了一会我想起在官方文档看到一个叫 Object.defineProperty() 的方法，我找到它，如下：

<span style="font-size: 14px;">/**<br/>* 给对象定义响应的属性<br/>*/export function defineReactive (<br/>    obj: Object,<br/>    key: string,<br/>    val: any,<br/>    customSetter?: ?Function,<br/>    shallow?: boolean<br/>) {    const dep = new Dep()    const property = Object.getOwnPropertyDescriptor(obj, key)    if (property && property.configurable === false) {        return<br/>    }    // 预定义getter/setters    const getter = property && property.get    const setter = property && property.set    let childOb = !shallow && observe(val)<br/>    Object.defineProperty(obj, key, {<br/>        enumerable: true,<br/>        configurable: true,        get: function reactiveGetter () {            const value = getter ? getter.call(obj) : val            if (Dep.target) {<br/>                dep.depend()                if (childOb) {<br/>                    childOb.dep.depend()<br/>                }                if (Array.isArray(value)) {<br/>                    dependArray(value)<br/>                }<br/>            }            return value<br/>        },        set: function reactiveSetter (newVal) {            const value = getter ? getter.call(obj) : val            /* 禁用eslint 不进行自我比较 */            if (newVal === value || (newVal !== newVal && value !== value)) {                return<br/>            }            /* 开启eslint 不进行自己比较 */            if (process.env.NODE_ENV !== &#39;production&#39; && customSetter) {<br/>                customSetter()<br/>            }            if (setter) {<br/>                setter.call(obj, newVal)<br/>            } else {<br/>                val = newVal<br/>            }<br/>            childOb = !shallow && observe(newVal)<br/>            dep.notify()<br/>        }<br/>    })<br/>}<br/></span>

Copier après la connexion

所以答案一直存在于文档中：

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

我只想简单的了解 Object.defineProperty() 做了什么，所以我用一个例子简单的给你讲解一下：

<span style="font-size: 14px;">var person2 = {<br/>    firstName: &#39;George&#39;,<br/>    lastName: &#39;Clooney&#39;,<br/>};<br/>Object.defineProperty(person2, &#39;fullName&#39;, {<br/>    get: function () {        return `${this.firstName} ${this.lastName}`;<br/>    },<br/>});<br/>console.log(person2.fullName); // 打印 "George Clooney"<br/></span>

Copier après la connexion

还记得文章开头C#的隐式 getter 吗？它们看起来很类似，但ES5才开始支持。你需要做的是使用 Object.defineProperty() 定义现有对象，以及何时获取这个属性，这个getter被称为响应式——这实际上就是Vue在你添加新数据时背后所做的事。

Est-ce que

`Object.defineProperty()` peut rendre Vue plus simple ?

Après avoir appris tout cela, je me suis demandé : Object.defineProperty() Vue peut-elle être simplifiée ? De nos jours, il y a de plus en plus de nouveaux termes. Est-il vraiment nécessaire de rendre les choses trop compliquées et difficiles à comprendre pour les débutants (c'est la même chose pour Redux) :

MutatorMutator : Peut-être que vous dites (implicite) setter
setter
Getters GettersObject.defineProperty() : Pourquoi ne pas remplacer getter
par (implicite)

<li>getter <p> </p>
</li>

store.commit()

foo = bar

store.commit()

store.commit("setFoo", bar);

store.commit("setFoo", bar); ? Object.defineProperty()

Qu'en pensez-vous ? Vuex doit-il être complexe ou peut-il être aussi simple que

Recommandations associées :

javascript utilise rem pour le développement réactif Partage d'exemples

Explication détaillée de la mise en page réactive frontale, des images réactives et du système de grille créé par vous-même

Quelle est la différence entre réactif et adaptatif

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7474

Tutoriel CakePHP

1377

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Explication détaillée de l'obtention des droits d'administrateur dans Win11 Mar 08, 2024 pm 03:06 PM

Le système d'exploitation Windows est l'un des systèmes d'exploitation les plus populaires au monde et sa nouvelle version Win11 a beaucoup attiré l'attention. Dans le système Win11, l'obtention des droits d'administrateur est une opération importante. Les droits d'administrateur permettent aux utilisateurs d'effectuer davantage d'opérations et de paramètres sur le système. Cet article présentera en détail comment obtenir les autorisations d'administrateur dans le système Win11 et comment gérer efficacement les autorisations. Dans le système Win11, les droits d'administrateur sont divisés en deux types : administrateur local et administrateur de domaine. Un administrateur local dispose de tous les droits d'administration sur l'ordinateur local

Explication détaillée du fonctionnement de la division dans Oracle SQL Mar 10, 2024 am 09:51 AM

Explication détaillée de l'opération de division dans OracleSQL Dans OracleSQL, l'opération de division est une opération mathématique courante et importante, utilisée pour calculer le résultat de la division de deux nombres. La division est souvent utilisée dans les requêtes de bases de données. Comprendre le fonctionnement de la division et son utilisation dans OracleSQL est donc l'une des compétences essentielles des développeurs de bases de données. Cet article discutera en détail des connaissances pertinentes sur les opérations de division dans OracleSQL et fournira des exemples de code spécifiques pour référence aux lecteurs. 1. Opération de division dans OracleSQL

Explication détaillée du rôle et de l'utilisation de l'opérateur modulo PHP Mar 19, 2024 pm 04:33 PM

L'opérateur modulo (%) en PHP est utilisé pour obtenir le reste de la division de deux nombres. Dans cet article, nous discuterons en détail du rôle et de l'utilisation de l'opérateur modulo et fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre. 1. Le rôle de l'opérateur modulo En mathématiques, lorsqu'on divise un entier par un autre entier, on obtient un quotient et un reste. Par exemple, lorsque l’on divise 10 par 3, le quotient est 3 et le reste est 1. L'opérateur modulo est utilisé pour obtenir ce reste. 2. Utilisation de l'opérateur modulo En PHP, utilisez le symbole % pour représenter le module

Explication détaillée de la fonction d'appel système Linux system() Feb 22, 2024 pm 08:21 PM

Explication détaillée de la fonction d'appel système Linux system() L'appel système est une partie très importante du système d'exploitation Linux. Il fournit un moyen d'interagir avec le noyau système. Parmi elles, la fonction system() est l’une des fonctions d’appel système couramment utilisées. Cet article présentera en détail l’utilisation de la fonction system() et fournira des exemples de code correspondants. Concepts de base des appels système Les appels système sont un moyen permettant aux programmes utilisateur d'interagir avec le noyau du système d'exploitation. Les programmes utilisateur demandent au système d'exploitation en appelant des fonctions d'appel système

Explication détaillée de la commande Linux curl Feb 21, 2024 pm 10:33 PM

Explication détaillée de la commande curl de Linux Résumé : curl est un puissant outil de ligne de commande utilisé pour la communication de données avec le serveur. Cet article présentera l'utilisation de base de la commande curl et fournira des exemples de code réels pour aider les lecteurs à mieux comprendre et appliquer la commande. 1. Qu’est-ce que la boucle ? curl est un outil de ligne de commande utilisé pour envoyer et recevoir diverses requêtes réseau. Il prend en charge plusieurs protocoles, tels que HTTP, FTP, TELNET, etc., et fournit des fonctions riches, telles que le téléchargement de fichiers, le téléchargement de fichiers, la transmission de données, le proxy.

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Analyse détaillée du parcours d'apprentissage du langage C Feb 18, 2024 am 10:38 AM

En tant que langage de programmation largement utilisé dans le domaine du développement de logiciels, le langage C est le premier choix de nombreux programmeurs débutants. L'apprentissage du langage C peut non seulement nous aider à acquérir des connaissances de base en programmation, mais également à améliorer nos capacités de résolution de problèmes et de réflexion. Cet article présentera en détail une feuille de route d'apprentissage du langage C pour aider les débutants à mieux planifier leur processus d'apprentissage. 1. Apprendre la grammaire de base Avant de commencer à apprendre le langage C, nous devons d'abord comprendre les règles de grammaire de base du langage C. Cela inclut les variables et les types de données, les opérateurs, les instructions de contrôle (telles que les instructions if,

En savoir plus sur Promise.resolve() Feb 18, 2024 pm 07:13 PM

Une explication détaillée de Promise.resolve() nécessite des exemples de code spécifiques. Promise est un mécanisme en JavaScript pour gérer les opérations asynchrones. Dans le développement réel, il est souvent nécessaire de traiter certaines tâches asynchrones qui doivent être exécutées dans l'ordre, et la méthode Promise.resolve() est utilisée pour renvoyer un objet Promise qui a été rempli. Promise.resolve() est une méthode statique de la classe Promise, qui accepte un

See all articles

Explication détaillée du principe de réactivité de Vue.js

<span style="font-size: 14px;">Object.defineProperty()</span> peut rendre Vue plus simple ?

Outils d'IA chauds

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Article chaud

Outils chauds

Bloc-notes++7.3.1

SublimeText3 version chinoise

Envoyer Studio 13.0.1

Dreamweaver CS6

SublimeText3 version Mac

Sujets chauds

`<span style="font-size: 14px;">Object.defineProperty()</span>` peut rendre Vue plus simple ?