1.計算
使用シナリオ：ページ内の一部のデータが他のデータに依存して変更される場合、計算された属性を使用できます。既存のデータに従って新しいデータを生成すると、2つのデータは永続的に確立された関係になりますが、キャッシュも確立されます。無関係なデータが変更された場合、再計算は行われず、キャッシュ内の値が直接使用されます。
计算属性computed是基于data中的数据进行处理的，data数据变化，他也跟着变化
当data中的数据没有发生改变时，我们调用computed中的函数n次，只会进行缓存（执行一次）
<div id="app">
<p>{
{
fullName}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'si',
lastName: 'li'
},
computed: {
fullName() {
return this.firstName + this.lastName //必须有return，否则无法拿到结果
}
}
})
</script>
fullNameをデータで宣言する必要はありません
2.見る
アプリケーションシナリオ：非同期（ajax、タイミングタスク）または高価な（時間のかかる）操作の処理
監視：データで定義された変数を監視し、変数が変更されると、監視でメソッドをトリガーします。データが変更されると、非同期を実行します。または高価な操作であり、状態の変化はいつでも変更できます。
watch:l类似于监听机制+事件机制
ほとんどの場合、計算を使用しますが、データの変更中に非同期操作を実行する場合、またはオーバーヘッドが比較的大きい場合は、監視が最適です。watchはオブジェクトであり、キーは監視される式であり、値は対応するコールバック関数です。値は、メソッド名、またはオプションを含むオブジェクトにすることもできます。
素人の言葉で言えば、計算された監視と時計の監視の両方で実装できる機能が推奨されます。焦点は計算されたのキャッシュ機能にあります
// 这里直接用 v-model 来绑定，不需要添加 change 事件
<input type="text" v-model="nameValue" style="margin-top:15px" /> {
{
tip}}
data() {
return {
nameValue: "",
tip: ""
};
},
methods: {
checkName(value) {
var that = this;
setTimeout(() => {
if (value == "admin") {
that.tip = "用户名已存在";
} else {
that.tip = "用户名可以使用";
}
}, 2000);
}
},
watch: {
// 数据变化时执行异步或开销较大的操作
nameValue(value) {
this.checkName(value);
this.tip = "正在验证......";
}
}
2.1時計の高度な使用法
注意，上面的watch方法是当改变值的时候，才会触发监听事件，但是我们想刚进入页面的时候，就触发监听事件，就要用hander() 方法
1. Handler（）：ページに入ると、ウォッチイベントはトリガーされずに自動的にバインドされます
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
}
}
}
2.即時属性：ブール値は、
immediate：true：データの変更を監視するために最初にロードされ
immediate：false：、変更が発生したときにのみ監視します
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
immediate: true
}
}
3、deep：true;詳細な監視を開くことです。つまり、すべての属性がリスナーで追加され、そのうちの1つが変更されると、ハンドラー関数が実行されます。
watch: {
// 页面加载时，就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
deep:true
}
}
参照アドレス：
https：//www.jianshu.com/p/a69a9bac9dc3
https://www.cnblogs.com/lk-food/p/12365949.html