Heim > Artikel > Web-Frontend > Lernen Sie Computer und Watch in Vue kennen und sprechen Sie über ihre Unterschiede
Dieser Artikel stellt Ihnen Computing und Watch in Vue vor und stellt Ihnen den Unterschied zwischen Compute und Watch vor. Ich hoffe, er wird Ihnen hilfreich sein.
1. Zweck: Die berechneten Attribute sind berechnete Attribute
2. Die Vorteile berechneter Attribute: Es kann einige Attribute, die auf der Grundlage anderer Attribute berechnet wurden, in ein Attribut umwandeln verfügt über einen Abhängigkeitscache
. Wenn sich das Abhängigkeitsattribut von berechnet nicht ändert, wird berechnet nicht neu berechnet. Wenn ein Datenelement von anderen Daten abhängt, entwerfen Sie die zu berechnenden Daten. [Verwandte Empfehlungen: „vue.js Tutorial“]Beispiel (Anzeige des Benutzernamens):
Vue.config.productionTip = false; new Vue({ data: { user: { email: "jade@qq.com", nickname: "jade", phone: "18810661088" } }, computed: { displayName: { get() { const user = this.user; return user.nickname || user.email || user.phone; }, set(value) { console.log(value); this.user.nickname = value; } } }, // DRY don't repeat yourself // 不如用 computed 来计算 displayName template: ` <div> {{displayName}} <div> {{displayName}} <button @click="add">set</button> </div> </div> `, methods: { add() { console.log("add"); this.displayName = "圆圆"; } } }).$mount("#app");
3.
Wenn sich die abhängigen Eigenschaften nicht ändern, wird getter/setter
nicht neu berechnet und standardmäßig nicht zwischengespeichert. Vue hat eine spezielle Verarbeitung durchgeführt
Wie wird zwischengespeichert? Sie können sich auf die folgenden Beispiele beziehen: 2. beobachten (zuhören/zuhören)
getter/setter
默认不会做缓存,Vue做了特殊处理
如何缓存?可以参考以下示例:
1、用途:当数据变化时,执行一个函数,watch是完美实现历史功能的一个函数(方法)
示例(撤销):
import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; new Vue({ data: { n: 0, history: [], inUndoMode: false }, watch: { n: function(newValue, oldValue) { console.log(this.inUndoMode); if (!this.inUndoMode) { this.history.push({ from: oldValue, to: newValue }); } } }, // 不如用 computed 来计算 displayName template: ` <div> {{n}} <hr /> <button @click="add1">+1</button> <button @click="add2">+2</button> <button @click="minus1">-1</button> <button @click="minus2">-2</button> <hr/> <button @click="undo">撤销</button> <hr/> {{history}} </div> `, methods: { add1() { this.n += 1; }, add2() { this.n += 2; }, minus1() { this.n -= 1; }, minus2() { this.n -= 2; }, undo() { const last = this.history.pop(); this.inUndoMode = true; console.log("ha" + this.inUndoMode); const old = last.from; this.n = old; // watch n 的函数会异步调用 this.$nextTick(() => { this.inUndoMode = false; }); } } }).$mount("#app");
加了immediate: true
,一次渲染的时候会触发watch
Vue.config.productionTip = false; new Vue({ data: { n: 0, obj: { a: "a" } }, template: ` <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新对象</button> </div> `, watch: { n() { console.log("n 变了"); }, obj:{ handler(){ console.log("obj 变了"); }, deep:true }, "obj.a": function() { console.log("obj.a 变了"); } } }).$mount("#app");
上面箭头函数的外层的函数是全局作用域,全局作用域的this就是全局对象window/global,所以你无法在这里获取this.n/this.xxx,所以,watch里面是绝对不能使用箭头函数的
vm.$watch('xxx',fn,{deep:...,immediate:...})
watch前面加$这样的写法是为了避免和一个叫watch的data名重复
2、deep:true
是干什么的?
如果object.a
变了,请问object
算不算也变了
如果需要答案是【也变了】,就用deep:true
如果需要答案是【没有变】,就用deep:false
deep
就是往不往里面去看,去深入的看,true
就是深入进入看,默认是false
(只看表层的地址)。
不光要比较obj
的地址,而且要比较里面任何一个数据变了,都要认为是obj
变了。
computed
:就是计算属性的意思watch
:就是监听的意思watch
支持异步代码而computed
不行computed
这个值在调用的时候,不需要加括号,它会根据依赖自动缓存,就是说如果依赖不变,这个computed
的值就不会重新再计算。
watch
它有两个选项,第一个是immediate
,表示在第一次执行时要渲染这个函数;另一个是deep
,意思是如果我们要监听一个对象,是否要看它里面属性的变化。
如果一个数据依赖于其他数据,那么把这个数据设计为computed
;
如果你需要在某个数据变化时做一些事情,使用watch
来观察这个数据的变化。
以上,就是computed
和watch
: Wenn sich die Daten ändern, führen Sie eine Funktion aus, beobachten ist das Perfekte Implementierung historischer Funktionen Eine Funktion (Methode)
Beispiel (Rückgängig machen)🎜:🎜rrreee🎜immediate: true
hinzugefügt, Überwachung wird während eines Renderings ausgelöst🎜rrreeeobject.a
ändert, gilt object
als geändert?
Wenn die Antwort, die Sie benötigen, [hat sich geändert] ist, verwenden Sie deep:true
. Wenn die Antwort, die Sie benötigen, [hat sich nicht geändert] ist, verwenden Sie deep:false
🎜🎜 tief bedeutet nicht nach innen zu schauen, sondern tief zu schauen. Der Standardwert ist <code>false
(nur die Oberflächenadresse wird betrachtet). 🎜🎜Wir müssen nicht nur die Adresse von obj
vergleichen, sondern auch, wenn sich darin Daten ändern, wird davon ausgegangen, dass sich obj
geändert hat. 🎜berechnet
: Es bedeutet berechnete Attributewatch
watch
asynchronen Code unterstützt, berechnet
jedoch nichtberechnet li> Wenn der Code>-Wert aufgerufen wird, müssen keine Klammern hinzugefügt werden. Er wird basierend auf Abhängigkeiten automatisch zwischengespeichert. Das heißt, wenn die Abhängigkeiten unverändert bleiben, wird der Wert dieses <code>berechnet
wird nicht neu berechnet. 🎜🎜watch
Es gibt zwei Optionen: Die erste ist immediate
, was bedeutet, dass diese Funktion bei der ersten Ausführung gerendert werden sollte, die andere ist deep code>, was bedeutet, dass wir, wenn wir ein Objekt überwachen möchten, die Änderungen in seinen Eigenschaften sehen möchten? 🎜<ul style="list-style-type: disc;">
<li>🎜Wenn Daten von anderen Daten abhängen, dann entwerfen Sie die Daten als <code>berechnet
;🎜
watch
, um die Änderungen in diesen Daten zu beobachten. 🎜berechnet
und beobachten
. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜
Das obige ist der detaillierte Inhalt vonLernen Sie Computer und Watch in Vue kennen und sprechen Sie über ihre Unterschiede. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!