Was ist das Attribut der Uhr in Vue?

watch ist ein Überwachungsattribut. In Vue können Sie die Änderung eines bestimmten Attributs über das Überwachungsattribut überwachen. Wenn sich dieses Attribut ändert, können Sie einige Vorgänge ausführen: 1. Wenn sich das vom überwachten Attribut überwachte Attribut ändert, wird die Rückruffunktion automatisch aufgerufen und ausgeführt 2. Überwachungsattribute Die überwachten Attribute müssen vorhanden sein, um wirksam zu sein. Es gibt zwei Möglichkeiten, Überwachungseigenschaften zu schreiben: „new Vue({watch:{}})“ und „vue instanziiertes Objekt.$watch('property name' callback function)“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

vue überwacht Eigenschaften

Während der Entwicklung werden wir auf eine Situation stoßen, in der wir einige Vorgänge ausführen müssen, wenn sich eine Eigenschaft ändert. Die Eigenschaften, die diese Änderung erkennen, werden in Vue als Überwachungseigenschaften bezeichnet.

1. Was ist ein Überwachungsattribut? Wir können die Änderung eines bestimmten Attributs über das Überwachungsattribut überwachen.

Wenn sich das vom Überwachungsattribut überwachte Attribut ändert, wird die Rückruffunktion (Handler) automatisch aufgerufen und relevante Vorgänge ausgeführt.

Das vom Überwachungsattribut überwachte Attribut muss vorhanden sein, um wirksam zu sein.

• Hier verwenden wir einen Wetterfall, um zu erklären, was Überwachungsattribute sind:
• Zuerst der HTML-Code:

    <div id="app">
        <p>今天天气很{{info}}</p>
        <button v-on:click="change">切换天气</button>
    </div>

Als nächstes schreiben wir den JS-Code:

    var vm = new Vue({
        el: "#app",
        data: {
            isHot: true,
        },
        computed: {
            info: function () {
                return this.isHot ? "热" : "冷";
            }
        },
        methods: {
            change: function () {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                handler:function (newVal, oldVal) {
                    console.log("isHot属性发生了变化");
                },
            }
        }
    });

Die handler-Funktion im Code ist Die zuvor erwähnte Rückruffunktion wird automatisch aufgerufen, wenn sich das Attribut isHot ändert.

Natürlich können wir dem idHot-Objekt ein Attribut hinzufügen: immediate Wenn der boolesche Wert dieses Attributs wahr ist, wird der handler-Callback ausgeführt Funktion ist Es wird einmal während der Initialisierung aufgerufen.

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true
        }
    }

handler这个函数就是我们前面说的回调函数，当isHot属性发生变化的时候，这个函数就会自动调用。

当然我们可以在idHot对象面添加一个属性：immediate，当此属性布尔值为真的时候，handler回调函数在初始化的时候就会调用一次。

    vm.$watch('isHot',function (newVal, oldVal) {
        console.log("isHot属性发生了变化");
    });

2.监视属性的写法

监视属性有两种写法：

• 在vue实例化对象中直接书写：
  new Vue({watch:{}}),然后传入相关配置
• 通过vue实例化对象.$watch('属性名'，回调函数)来书写

这里的第一种写法上面我们已经展现过了，下面我们就展示一下第二种写法：

这里我们假设vue的实例化对象为vm。

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true,
            deep: true
        }
    }

3.监视属性之深度监视

前面我们实现的监视，只能监视vue实例data中直接的简单数据，要是遇到对象或者数组，就无法监视了。

这样做的方法是vue为了提高效率，在vue监视属性中，默认只监视一层，如果要监视多层，就需要我们手动开启深度监视。

rrreee

其中deep:true

2. So schreiben Sie Überwachungseigenschaften

Es gibt zwei Möglichkeiten, Überwachungseigenschaften zu schreiben:

Schreiben Sie direkt in das Vue-Instanziierungsobjekt:
new Vue({watch:{ }} ) und übergeben Sie dann die entsprechende KonfigurationVerwenden Sie vue-Instanziierungsobjekt.$watch('property name', callback function) zum Schreiben

🎜🎜Die erste Schreibweise Hier ist wie oben. Es wurde bereits gezeigt. Lassen Sie uns die zweite Schreibweise zeigen: 🎜🎜Hier gehen wir davon aus, dass das Instanziierungsobjekt von vue vm ist. 🎜rrreee🎜🎜🎜3. Umfassende Überwachung von Überwachungsattributen🎜🎜🎜🎜Die zuvor implementierte Überwachung kann nur einfache Daten direkt in den Vue-Instanzdaten überwachen. Wenn sie auf ein Objekt oder Array stoßen, können sie nicht überwacht werden. 🎜🎜Um die Effizienz zu verbessern, wird in den Vue-Überwachungseigenschaften standardmäßig nur eine Ebene überwacht. Wenn wir mehrere Ebenen überwachen möchten, müssen wir die detaillierte Überwachung manuell aktivieren. 🎜rrreee🎜deep:true aktiviert die Tiefenüberwachung. Bei der Tiefenüberwachung werden die Objekte oder Arrays in den Daten in Vue überwacht. Wenn sich die Eigenschaften in den Objekten oder Arrays ändern, wird die Rückruffunktion der Überwachungseigenschaften automatisch aufgerufen. 🎜🎜In Vue ist es tatsächlich möglich, Änderungen in den internen Werten von Objekten zu erkennen. Warum aktiviert die Vue-Überwachungseigenschaft nicht standardmäßig eine Tiefenüberwachung? 🎜🎜Da die Rückruffunktion der Vue-Überwachungseigenschaften aufgerufen wird, wenn sich die Daten ändern, überwacht Vue alle Eigenschaften innerhalb des Objekts, was die Effizienz von Vue erheblich verringert. 🎜🎜Wenn wir Überwachungsattribute verwenden, beurteilen wir, ob eine detaillierte Überwachung basierend auf spezifischen Geschäftsanforderungen ermöglicht werden soll. [Verwandte Empfehlungen: 🎜vuejs-Video-Tutorial🎜, 🎜Web-Front-End-Entwicklung🎜]🎜

Das obige ist der detaillierte Inhalt vonWas ist das Attribut der Uhr in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!