ホームページ > 記事 > ウェブフロントエンド > コンピューティングと Vue について知り、その違いについて話しましょう
コンピューティングと Vue について知り、その違いについて話しましょう
- 青灯夜游転載
- 2021-12-07 19:20:501909ブラウズ
この記事では、Vue での computed と watch の紹介と、computed と watch の違いについて紹介します。
1. 目的: 計算された属性は、計算された属性です
# 2. 計算プロパティの利点: 他のプロパティに基づいて計算されるいくつかのプロパティを 1 つのプロパティに変換できますcomputed には
依存関係キャッシュがあります (computed の依存関係がある場合)。変更しないと、計算は再計算されません。データの一部が他のデータに依存する場合は、計算されるデータを設計します。 [関連する推奨事項:「vue.js チュートリアル 」] 例 (ユーザー名表示):
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、cache:
依存するプロパティが変更されない場合、それらは再計算されませんgetter/setterデフォルトではキャッシュは行われません。Vue は特別な処理を行っていますキャッシュ方法?次の例を参照できます:
2. watch (listening/listening)
1. Purpose: データが変更されたときに関数を実行します。履歴の完璧な実装 関数
の関数 (メソッド) 例 (元に戻す): 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");追加
, watch になります1 回のレンダリング中にトリガーされます <pre class="brush:js;toolbar:false;">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 += &#39;hi&#39;">obj.a + &#39;hi&#39;</button>
<button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
</div>
`,
watch: {
n() {
console.log("n 变了");
},
obj:{
handler(){
console.log("obj 变了");
},
deep:true
},
"obj.a": function() {
console.log("obj.a 变了");
}
}
}).$mount("#app");</pre>
- 構文 2:
- # ではアロー関数を使用してはなりません。 ##
vm.$watch('xxx',fn,{deep:...,immediate:...})watch
2 というデータ名との重複を避けるために、watch の前に $ が追加されています。
deep:true は何をするのでしょうか?
が変更された場合、object は変更としてカウントされますか?
答えを [変更されている] にする必要がある場合は、deep:true を使用します。 答えを [変更されていない] にする必要がある場合は、deep:false# を使用します。 # deep
true は深く見ることを意味します。デフォルトは false (表面アドレスのみを見る) です。 obj
obj が変更されたと見なす必要があります。 3. 概要
- : 計算されたプロパティを意味します
-
watch: モニタリングを意味します -
watch は非同期コードをサポートしますが、 - computed
はサポートしません。computed
computed の値は再計算されません。 watch
immediate で、この関数は最初の実行時にレンダリングされることを意味し、もう 1 つは deep は、オブジェクトを監視したい場合、そのプロパティの変化を見たいかどうかを意味します。
- computed
- ;
必要に応じて設計します。特定のデータが変化したときに、 watch - を使用してこのデータの変化を観察します。
上記は、 computed
watch の違いです。 プログラミング関連の知識について詳しくは、プログラミング入門
以上がコンピューティングと Vue について知り、その違いについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。