vueリスニングプロパティwatchとcomputed
26562 ワード
参照先:
詳細はvue 2.0リスニング属性の使用心得と計算属性の使用
vueリスニングオブジェクトのプロパティ
1.基礎版リスニング:「単一値」をリスニングする
シーンは以下の通りです:入力ボックスはあなたの年齢を入力して、もし年齢が0-15歳ならばヒント情報:あなたはまだ子供で、もし年齢が15-25歳ならば、ヒント情報:あなたはすでに少年で、もし年齢が25歳以上ならば、ヒント情報:あなたはすでに成長しました.必要に応じてリスニングプロパティに合わせて、次のコードを入手します.
ここで特に説明する必要があるのは、堅牢な属性メソッドの2つのパラメータがそれぞれ意味を表していることです.最初のvalは面と向かって傍受している属性の値であり、oldvalは属性が変わる前の値であり、これはパラメータの名前は自分で定義することができますが、パラメータが表す意味は変わりません.
2.ステップアップリスニング:リスニング対象
オブジェクトinfoのプロパティage値の変化を傍受するため、深さ傍受を使用する必要があります.具体的なコードは次のとおりです.
ここで注意しなければならないのは2つあります.1、ここでfunctionは矢印関数の代わりに使用できません.矢印関数を使用すると、thisの指向はグローバルになります. 2、ここに追加された属性がdeepであることに気づきます.これは、オープン値がtrueの場合、逆にfalseである場合、深さリスニングをオンにするかどうかを意味します.
3.最上位リスニング:リスニング対象の属性
2つ目のケースについて、あなたが1つの問題を発見したかどうか分かりません.私たちが傍受しているのは1つのオブジェクトの中の属性の変化ですが、もしこのオブジェクトの中に多くの値がある場合、2つ目の方法で傍受することもできますが、これは資源に対する大きな浪費であり、厳格なプログラマー(微笑みの顔)として、このようなことは絶対に許されないので、computed(計算プロパティ)と組み合わせて上記のコードを最適化することができます.
以上から,今回傍受したのは計算属性agevalであり,計算属性はinfoオブジェクト中のageの値を返し,2回目のコードと比較すると,2回目のコードのうち傍受した1つはオブジェクトinfo,1つはinfoオブジェクト中のageの値であり,性能が大幅に向上していることが期待される結果である.
詳細はvue 2.0リスニング属性の使用心得と計算属性の使用
vueリスニングオブジェクトのプロパティ
1.基礎版リスニング:「単一値」をリスニングする
シーンは以下の通りです:入力ボックスはあなたの年齢を入力して、もし年齢が0-15歳ならばヒント情報:あなたはまだ子供で、もし年齢が15-25歳ならば、ヒント情報:あなたはすでに少年で、もし年齢が25歳以上ならば、ヒント情報:あなたはすでに成長しました.必要に応じてリスニングプロパティに合わせて、次のコードを入手します.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
head>
<body>
<div id="app">
：<input type="number" v-model="age"><br>
：<span>{{infoMsg}}span>
div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
age: 0,
infoMsg: ""
},
watch: {
age: function (val, oldval) {
if (val > 0 && val < 15) {
this.infoMsg = " "
} else if (val > 15 && val < 25) {
this.infoMsg = " "
} else {
this.infoMsg = " "
}
}
}
})
script>
body>
html>
ここで特に説明する必要があるのは、堅牢な属性メソッドの2つのパラメータがそれぞれ意味を表していることです.最初のvalは面と向かって傍受している属性の値であり、oldvalは属性が変わる前の値であり、これはパラメータの名前は自分で定義することができますが、パラメータが表す意味は変わりません.
2.ステップアップリスニング:リスニング対象
オブジェクトinfoのプロパティage値の変化を傍受するため、深さ傍受を使用する必要があります.具体的なコードは次のとおりです.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
head>
<body>
<div id="app4">
：<input type="number" v-model="info4.age4"><br>
：<span>{{infoMsg4}}span>
div>
<script type="text/javascript">
var vm = new Vue({
el: '#app4',
data: {
info4: {
age4: ""
},
infoMsg4: ""
},
watch: {
info4: {
handler: function (val, oldval) {
var that = this;
if (val.age4 > 0 && val.age4 < 15) {
that.infoMsg4 = " ";
} else if (val.age4 > 15 && val.age4 < 25) {
that.infoMsg4 = " ";
} else {
that.infoMsg4 = " ";
}
},
deep: true
}
}
})
script>
body>
html>
ここで注意しなければならないのは2つあります.
3.最上位リスニング:リスニング対象の属性
2つ目のケースについて、あなたが1つの問題を発見したかどうか分かりません.私たちが傍受しているのは1つのオブジェクトの中の属性の変化ですが、もしこのオブジェクトの中に多くの値がある場合、2つ目の方法で傍受することもできますが、これは資源に対する大きな浪費であり、厳格なプログラマー(微笑みの顔)として、このようなことは絶対に許されないので、computed(計算プロパティ)と組み合わせて上記のコードを最適化することができます.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
head>
<body>
<div id="app5">
：<input type="number" v-model="info5.age5"><br>
：<span>{{infoMsg5}}span>
div>
<script type="text/javascript">
var vm = new Vue({
el: '#app5',
data: {
info5: {
age5: "",
name5: "",
hobit5: ""
},
infoMsg5: ""
},
computed: {
ageval: function () {
return this.info5.age5;
}
},
watch: {
ageval: {
handler: function (val, oldval) {
var that = this;
if (val > 0 && val < 15) {
that.infoMsg5 = " ";
} else if (val > 15 && val < 25) {
that.infoMsg5 = " ";
} else {
that.infoMsg5 = " ";
}
},
deep: true
}
}
})
script>
body>
html>
以上から,今回傍受したのは計算属性agevalであり,計算属性はinfoオブジェクト中のageの値を返し,2回目のコードと比較すると,2回目のコードのうち傍受した1つはオブジェクトinfo,1つはinfoオブジェクト中のageの値であり,性能が大幅に向上していることが期待される結果である.