計算結果の特性（計算属性）とウォッチャー（リスナー）を使用します
多くの場合、我々はページ上の変数の値を表示したい、あなたは例えば、いくつかの計算を通過する必要があります。
<div id="example">
{% raw %}{{{% endraw %} some_string.split(',').reverse().join('-') }}
</div>
より複雑な、より多くのエラーが発生しやすい後者。
今回は、計算によって得られたようなデータの作成を容易にするためのメカニズムが必要です。
だから、計算結果のプロパティは、私たちのソリューションです。
典型的な例
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p> 原始字符串： {{my_text}} </p>
<p> 通过运算后得到的字符串： {{my_computed_text}} </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
my_text: 'good good study, day day up'
},
computed: {
my_computed_text: function(){
// 先去掉逗号，然后按照空格分割成数组，然后翻转，并用'-'来连接
return this.my_text.replace(',', '').split(' ').reverse().join('-')
}
}
})
</script>
</body>
</html>
それは合格、Vueののコンストラクタで、キーコードの上に見ることができる computedパラグラフを。
下図のように実行するためにブラウザを使用した後、結果を見ることができます。
また、表示するためのコンソールを開きます。
エントリー
> app.my_text
あなたは次のようになります。「良い良い勉強、アップ日の日」
エントリー
> app.my_computed_text
変換は次のようになります後：「アップ日の日研究-良い、良いです」
通常の方法で計算プロパティの違い。
上記の例によると、私たちは、達成するための通常の方法を使用できます。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p> 原始字符串： {{my_text}} </p>
<p> 通过运算后得到的字符串： {% raw %}{{{% endraw %}my_computed_text() }} </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
my_text: 'good good study, day day up'
},
methods: {
my_computed_text: function(){
return this.my_text.replace(',', '').split(' ').reverse().join('-') + '，我来自于 function, 不是computed '
}
}
})
</script>
</body>
</html>
上記のコードは、のように実行した後、以下に示します：
あなたは、彼らが同じ効果を得ることがあります。
彼らの違いは次のとおりです。計算されたプロパティの使用方法は、「キャッシュ」アップを発生します。計算された特性に対応する各時間であれば、対応する依存データが変更されないように、それは変更されない、コール。
実装「機能」バージョンの使用は、キャッシュが問題ではありません。各時間に対応する数値計算を再生。
だから、私たちは「計算されたプロパティ」を使用するかどうかを選択、または通常の関数の形式を使用するように、実際の状況を追跡する必要があります。
監視されるプロパティ
プロパティ（属性）Vuejs、変更（計算）モニタ他の変数の変化に応じて算出または変更のいずれかが発生する可能性がある（時計）
私たちは、次のように他の変数に応じて変更自体は、（時計）を監視する方法の例を見て。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p>
我所在的城市： <input v-model='city' />（这是个watched property)
</p>
<p>
我所在的街道： <input v-model='district' />（这是个watched property)
</p>
<p> 我所在的详细一些的地址： {{full_address}} （每次其他两个发生变化，这里就会跟着变化) </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
city: '北京市',
district: '朝阳区',
full_address: "某市某区"
},
watch: {
city: function(city_name){
this.full_address = city_name + '-' + this.district
},
district: function(district_name){
this.full_address = this.city + '-' + district_name
}
}
})
</script>
</body>
</html>
上記のコードでは、我々はそれを見ることができる watch: { city: ..., district: ...}、と述べた、 city と district 聞いてきており、これら2です watched properties。
ロングcity と district変更が full_address 変更に従います。
私たちは、下記のようにあるため、この時点で、コードの上にブラウザを開い city て、district 変更されていない、 full_address値が「都市の地区」です。
私が続く「ストリート」の入力ボックス、「望京の通り、」言葉にいたとき、あなたは、以下の「完全なアドレス」を参照してくださいすることができ、それが変更されました。下図のように：
これは、計算された時計を使用するよりもコンパクトになります
上記の例では、我々はできる computed 、以下のように書き換えること：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p>
我所在的城市： <input v-model='city' />
</p>
<p>
我所在的街道： <input v-model='district' />
</p>
<p> 我所在的详细一些的地址： {{full_address}} （这是使用computed 实现的版本) </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
city: '北京市',
district: '朝阳区',
},
computed: {
full_address: function(){
return this.city + this.district;
}
}
})
</script>
</body>
</html>
あなたは1つの以下の方法、見ることができます dataプロパティで定義されても、簡単なたくさんの小さいです。コードは簡単です、それを維持することは容易である（小さなコードの量を、プログラムをよりよく理解）
（ミューテータ）のセッター計算プロパティとして
原則として、他の値に基づいてプロパティを計算し、それが来て計算されています。修正すべきではありません。
しかし、開発には、いくつかの例は、変更を行うための「計算されたプロパティ」の必要性は、特定の対応する属性の効果ながら、確かにあります。（上記プロセスにより逆転されます）。
我々は、次のコードを見て：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p>
我所在的城市： <input v-model='city' />
</p>
<p>
我所在的街道： <input v-model='district' />
</p>
<p> 我所在的详细一些的地址： <input v-model='full_address' /> </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
city: '北京市',
district: '朝阳区',
},
computed: {
full_address: {
get: function(){
return this.city + "-" + this.district;
},
set: function(new_value){
this.city = new_value.split('-')[0]
this.district = new_value.split('-')[1]
}
}
}
})
</script>
</body>
</html>
それは上記のコードで見ることができ、そのような存在です。
computed: {
full_address: {
get: function(){
return this.city + "-" + this.district;
},
set: function(new_value){
this.city = new_value.split('-')[0]
this.district = new_value.split('-')[1]
}
}
}
図から分かるように、上記 get のコードセグメントは、コードは、元のコンテンツです。 setもし計算されたプロパティ（つまり、full_addressである）場合、変更、端部は、次いで、定義 city及び district 値は変更する方法であるべきです。
開いているブラウザの後、背中に「最も下の入力ボックス」で、私たちいくつかの単語を入力するには、対応する「ストリート」は変更されていることがわかります。