Heim > Artikel > Web-Frontend > 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.
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.<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.监视属性的写法
监视属性有两种写法:
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
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
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!