まず第一に、計算と監視の両方がページのデータ変更を監視することです。
それらの違いは次のとおりです。
計算された属性（1対多、1対1）
計算されたプロパティはVueインスタンスに混合され、すべてのゲッターとセッターのこのコンテキストは自動的にVueインスタンスにバインドされます。
1.カスタム変数を監視します。この変数はデータと小道具の変数で繰り返すことはできません
。2。計算された属性の属性値は関数のデフォルトのgetメソッドであり（戻り値が必要）、属性にはgetがあります。およびsetメソッド;
3。キャッシュをサポートします。依存データの変更が再計算される場合のみ、それ以外の場合はキャッシュ内のデータがフェッチされます
。4。非同期はサポートされておらず、計算での非同期操作は無効です。
<templete>
<div>{
{
message}}</div>
</templete>
<script>
data(){
return {
name:'muma',
type:'man'
}
},
computed:{
//仅读取getter
message:function(){
return `${
this.muma}是${
this.man}孩子！！！`
}，
// 读取getter和设置setter
msg：{
get: function () {
return `${
this.muma}是${
this.man}`
},
//在给msg重新赋值的时候会调用setter，例如this.msg = '你是谁'。
set: function (newValue) {
//newValue是msg新的值
let names = newValue.split('是');
this.muma = names[0];
this.man = names[1];
}
}
}
</script>
属性ウォッチの監視（多対1）
1.データと小道具のデータの変化を監視します
。2。キャッシュはサポートされていません。毎回再計算されます。3。
非同期をサポートします。監視機能は2つのパラメーターを受け取ります。最初のパラメーターは最新の値で、2番目のパラメーターは前の値を入力します。
<templete>
<div>{
{
message}}</div>
</templete>
<script>
data(){
return {
name:'muma',
type:'boy',
func:'1',
obj:{
label:'aa'
}
}
},
watch:{
//name变了修改type
name:function(new, old){
this.type = 'girl';
},
'func':'funcChange',
'obj.label':{
handler(new, old){
this.type = 'boy';
},
immediate:true, //控制是否在第一次渲染是执行这个函数
deep:true //控制是否要看这个对象里面的属性变化
}
},
methods:{
funcChange(){
console.log('......')
}
}
</script>