vue js単一のハンドラで複数のプロパティを見る

Question

現在、いくつかのプロパティを監視する必要があります。そして、それぞれが変更された場合、私は同じ関数を呼び出さなければなりません：

export default{ 
    // ...... rest of code 
    watch: { 
     propa: function(after,before) { 
     doSomething(after,before); 
     }, 
     propb: function(after,before) { 
     doSomething(after,before); 
     } 
     // ... so on 
    } 
} 

私は上記の同じコードを複数回書く必要があります。 同じコードを複数回記述することなく、すべてのプロパティを監視してその変更ハンドラを呼び出すことは可能ですか？

PS：私は

Answer 1

まずVUEの1.1を使用しています、あなたの定義を簡略化することができます。あなたの時計がちょうど

watch:{ 
    propa: doSomething, 
    propb: doSomething 
} 

セカンドことができるようdoSomethingは、時にはVueの定義オブジェクトは単なるJavaScriptのオブジェクトで覚えておくことが重要だ、Vueの上の方法であることが表示されません。彼らは操作することができます。

// First argument is the definition, the rest are property names 
function buildWatch(def){ 
    if (!def.watch) 
    def.watch = {}; 
    const properties = Array.prototype.slice.call(arguments,1); 
    for (let prop of properties) 
    def.watch[prop] = doSomething; 
    return def; 
} 

export default buildWatch(vueDefinition, "propa", "propb") 

Answer 2

：あなたは あなたのデータオブジェクト内のすべてのプロパティを見てみたかった場合は、あなたの特性の一部だけ定義されたリストを見たい場合

は、あなたがこの

function doSomething(after, before){ 
    console.log(after,before); 
} 

function buildWatch(def){ 
    if (!def.watch) 
    def.watch = {}; 
    for (let prop of Object.keys(def.data)) 
    def.watch[prop] = doSomething; 
    return def; 
} 

let vueDefinition = { 
    data:{ 
    propa: "testing", 
    propb: "testing2", 
    propc: "testing3" 
    } 
} 

export default buildWatch(vueDefinition) 

ような何かを行うことができます

質問を解決する正式な方法はありません（see this）。しかし、あなたはトリックとして計算されたプロパティを使用することができます。

export default { 
    // ... 
    computed: { 
    propertyAAndPropertyB() { 
     return ${this.propertyA}|`${this.propertyB}; 
    }, 
    }, 
    watch: { 
    propertyAAndPropertyB(newVal, oldVal) { 
     const [oldPropertyA, oldProvertyB] = oldVal.split('|'); 
     const [newPropertyA, newProvertyB] = newVal.split('|'); 
     // doSomething 
    }, 
    }, 
} 

あなただけの何かをしたいとの新しい/古い値何を気にしない場合。 は二行

const [oldPropertyA, oldProvertyB] = oldVal.split('|'); 
const [newPropertyA, newProvertyB] = newVal.split('|');