まず、アレイのモニター
1.watchは、例えば、配列に変更をプッシュするために聴くことができます
データ(){ リターン{ デモ:[ 1,2 ] } }、
{)(マウント
window.myVueはこれを=
}、
時計:{ デモ(ヴァル){ にconsole.log(ヴァル) } }、 myVue.demo.push(3) // [1,2,3]
2.watch配列は、以下の変更を検出することはできません。
-
- あなたが直接使用するキーインデックスを設定すると、例えば:myVue.demo [1] = 5
- あなたは、例えば、配列の長さを変更する場合:myVue.demo.length = 2
今度は、元のキー、その後、削除することができ $set
、あなたが時計をトリガすることができるように、新しいものを
myVue。(myVue.demo、0,8)を設定$ // [8,2,3]
3.より複雑な、あなたは、あなたが深さを聞くために必要がある場合、ネストされたオブジェクトの配列を聞きたいです
データ(){ リターン{ デモ:[ { 名: 'ジョン・ドウ' 、 年齢: 18である }、
{ 名: 'ジョン・ドウ' 、 年齢: 20である } ] } }、 (){ マウント window.myVue = この }、 時計:{ デモ:{ ハンドラ(ヴァル){ にconsole.log(ヴァル)は } // これはリスナーに代わって、キーであるデモ再帰変更 ディープ:trueに } }、 myVue.demo[0].age = 30 //[{name:'张三',age:30},{name:'李四',age:20}]
第二に、モニタオブジェクト
図1は、上記アレイポイント3と類似していてもよいです
2.あなたは、直接オブジェクトの値を監視することができます
データ(){ リターン{ デモ:{ 名: '张三' 、 子:{ 名: '李四' 、 年齢: 20 } } } }、 (マウント){ window.myVue = この }、 腕時計:{ 「デモ.child」:{ ハンドラ:関数(ヴァル){ にconsole.log(ヴァル) }、 深い:真 }
//或者
'demo.name'(ヴァル){
console.log(ヴァル)
}
}, myVue.demo.name = '王二' //王二
myVue.demo.age = '80' //{name:'李四',age:80}
私はメッセージを歓迎修正するために他の良いの方法があります。