Watch と computed の類似点と相違点、およびそれぞれの使用法

---

Watch と computed の類似点と相違点、およびそれぞれの使用法

1. 類似点

• それらはすべて関数に基づいています
• 依存データが変更されると、関連関数がトリガーされてデータ変更が実装されます。
  补：methods 里面是用来定义函数的，需要手动才能执行

2. 相違点

• watchイベント リスニング + イベント メカニズム監視に似たメソッドは、デフォルトでは実行されず、依存するプロパティが変更された場合にのみ実行されます。(自動実行) オブジェクトを監視します。キーは監視する式、値は対応するコールバック関数です。これは主に、特定のビジネス ロジック操作を実行するために特定のデータの変更を監視するために使用され、計算とメソッドの組み合わせとみなすことができます。
• computed計算されたプロパティです。計算されたプロパティが変更に依存する場合、計算されたプロパティは再計算されてキャッシュされます。他のデータ (依存データなし) が変更された場合、計算されたプロパティは再計算されません。主に属性として使用され、使用時に () を追加しないでください。これによりパフォーマンスが向上します。

3. 使用方法

一般に、値の変化を監視するために複雑なビジネス ロジックを実行する必要がある場合は watch を使用でき、
他の属性に依存して値を動的に取得する必要がある場合は computed を使用できます。

// 属性监听 
watch:{
    
    
	//firstName 在date中定义
     firstName:function(value){
    
    
        console.log(value);
         this.name = this.firstName + '-' +this.lastName
     },
     lastName:function(value){
    
    
         console.log(value);
         this.name = this.firstName + '-' +this.lastName
    },
},


// 属性计算
computed: {
    
    
    // 属性不能和data中重复
    name: {
    
    
        get:function(){
    
    
            return this.firstName + '-' +this.lastName;
        },
        // 只有当自身发生改变的时候才触发
        set(value){
    
    
            console.log(value);
            console.log(value.split('-'));
            if( value.split('-').length ==2){
    
    
                this.firstName = value.split('-')[0]
            this.lastName = value.split('-')[1]
            }
        }  
    },
},