suchen

Heim >Web-Frontend >js-Tutorial >Vue-Anwendungsfall für berechnete Eigenschaften

Vue-Anwendungsfall für berechnete Eigenschaften

php中世界最好的语言
php中世界最好的语言Original
2018-05-02 14:45:541146Durchsuche

Dieses Mal werde ich Ihnen einen Anwendungsfall von Vue-berechneten Eigenschaften vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue-berechneten Eigenschaften? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Was ist ein berechnetes Attribut

Die Ausdrücke in Vorlagen sind sehr praktisch, aber ursprünglich für einfache Operationen konzipiert. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Zum Beispiel: 

<p id="example">
 {{ message.split('').reverse().join('') }}
</p>

Der Ausdruck hier enthält 3 Operationen, was nicht sehr klar ist. Wenn Sie also auf komplexe Logik stoßen, sollten Sie das spezielle berechnete Attribut berechnet von Vue verwenden, um damit umzugehen.

2. Verwendung berechneter Attribute

Verschiedene komplexe Logiken können in einem berechneten Attribut vervollständigt werden, einschließlich Operationen, Funktionsaufrufen usw. As solange am Ende ein Ergebnis zurückgegeben wird.

Schreiben wir das obige Beispiel mit berechneten Eigenschaften um

<p id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了
</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
});

Das Ergebnis:

Ursprüngliche Nachricht: „Hallo“

Berechnete umgekehrte Nachricht: „ olleH"

Zusätzlich zur einfachen Verwendung im obigen Beispiel können berechnete Eigenschaften auch auf den Daten mehrerer Vue-Instanzen basieren. Solange sich Daten ändern, bleiben die berechneten Eigenschaften erhalten -Ausgeführt, und die Ansicht wird ebenfalls aktualisiert. 

<body>
  <p id="app">
    <button @click="add()">补充货物1</button>
    <p>总价为：{{price}}</p>
  </p>
</body>
var app = new Vue({    
    el: '#app', 
  data: {
    package1: {
      count: 5,
      price: 5
    },
    package2: {
      count: 10,
      price: 10
    }
  },
  computed: {
   price: function(){
     return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//总价随着货物或价格的改变会重新计算
   }
  },
  methods: {  //对象的方法
    add: function(){
      this.package1.count++
    }
  }
});

Es gibt zwei sehr praktische Tipps für berechnete Eigenschaften, die leicht übersehen werden: Erstens können berechnete Eigenschaften von anderen berechneten Eigenschaften abhängen. Zweitens können berechnete Eigenschaften nicht nur auf den Daten der aktuellen Vue-Instanz basieren, sondern auch auf anderen Verlassen Sie sich auch auf andere Instanzen, zum Beispiel: 

 <p id="app1"></p>
  <p id="app2">{{ reverseText}}</p>
var app1 = new Vue({
  el: '#app1',
 data: {
   text: 'computed'
  }
});
var app2 = new Vue({
  el: '#app2',
  computed: {
    reverseText: function(){
      return app1.text.split('').reverse().join(''); //使用app1的数据进行计算
    }
  }
});

Jede berechnete Eigenschaft enthält einen Getter und einen Setter. Unsere beiden obigen Beispiele sind die Standardverwendung berechneter Eigenschaften, bei denen nur Getter zum Lesen verwendet werden.

Bei Bedarf können Sie auch eine Setter-Funktion bereitstellen. Wenn Sie den Wert einer berechneten Eigenschaft manuell ändern, genau wie beim Ändern gewöhnlicher Daten, wird die Setter-Funktion ausgelöst, um einige benutzerdefinierte Vorgänge auszuführen, wie zum Beispiel: 

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
});
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

In den meisten Fällen verwenden wir nur die Standard-Getter-Methode, um eine berechnete Eigenschaft zu lesen. Wenn Sie eine berechnete Eigenschaft deklarieren, können Sie sie also direkt verwenden Es ist nicht erforderlich, sowohl Getter als auch Setter zu deklarieren.

3. Zwischenspeicherung berechneter Attribute

Im obigen Beispiel können wir zusätzlich zur Verwendung berechneter Attribute auch Methoden in Ausdrücken aufrufen Erzielen Sie den gleichen Effekt, wie zum Beispiel: 

<p>{{reverseTitle()}}</p>
// 在组件中
methods: {
 reverseTitle: function () {
  return this.title.split('').reverse().join('')
 }
}

Wir können dieselbe Funktion als Methode anstelle einer berechneten Eigenschaft definieren, und das Endergebnis der beiden Methoden ist tatsächlich genau das gleiche. Nur einer verwendet reverseTitle(), um den Wert abzurufen, und der andere verwendet reverseTitle, um den Wert abzurufen.

Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden. Eine berechnete Eigenschaft wird nur dann neu bewertet, wenn sich die zugehörigen Abhängigkeiten ändern.

Das bedeutet, dass, solange sich der Titel nicht geändert hat, bei mehrmaligem Zugriff auf die berechnete Eigenschaft „reverseTitle“ sofort das vorherige Berechnungsergebnis zurückgegeben wird, ohne dass die Funktion erneut ausgeführt werden muss.

Ein kleines Beispiel: 

<p>{{reverseTitle}}</p>
    <p>{{reverseTitle1()}}</p>
    <button @click="add()">补充货物1</button>
    <p>总价为：{{price}}</p>
  computed: {
   reverseTitle: function(){
     return this.title.split('').reverse().join('')　　//而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
   },
   price: function(){
     return this.package1.count*this.package1.price+this.package2.count*this.package2.price
   }
  },
  methods: {  //对象的方法
    add: function(){
      this.package1.count++
    },
    reverseTitle1: function(){
      return this.title.split('').reverse().join('')　　//点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
    }
  },

Im Gegensatz dazu führt die aufrufende Methode die Funktion immer dann erneut aus, wenn ein erneutes Rendern ausgelöst wird.

Warum brauchen wir Caching? Angenommen, wir haben eine rechenintensive Eigenschaft A, die das Durchlaufen eines riesigen Arrays und die Durchführung vieler Berechnungen erfordert. Dann haben wir möglicherweise andere berechnete Eigenschaften, die von A abhängen.

Ohne Caching werden wir den Getter von A zwangsläufig mehrmals ausführen! Wenn Sie kein Caching wünschen, verwenden Sie stattdessen Methoden.

Werfen wir einen Blick auf die Verwendung der von Vue berechneten Eigenschaften

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:function(){
            return this.a+1;
          }
        }
      });
      console.log(vm.a);
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:function(){
            return this.a+1;
          }
        }
      });
      document.onclick = function(){
        vm.a = 101;
      }
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:{
            get:function(){
              return this.a+2;
            },
            set:function(val){
              this.a=val;
            }
          }
        }
      });
      document.onclick = function(){
        vm.b = 10;
      }
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Dinge finden Sie unter php Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

Ausführliche Erläuterung der Verwendung der NodeJS-Mehrversionsverwaltung

Wie FileReader einen Dateireader implementiert

Das obige ist der detaillierte Inhalt vonVue-Anwendungsfall für berechnete Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie die JS-Datums-/UhrzeitauswahlNächster Artikel：So verwenden Sie die JS-Datums-/Uhrzeitauswahl

In Verbindung stehende Artikel

Mehr sehen