vue.js の $watch の oldvalue と newValue の詳細な説明

この記事では、vue.js の $watch の oldvalue と newValue に関する関連情報を主に紹介し、サンプル コードを通じて詳しく説明し、watch に関する他のテストも紹介します。 vue.js これには、一定の参照価値と学習価値があります。必要な友人は、エディターをフォローして見ることができます。

$watch の oldvalue と newValue

ご存知のとおり、vue.js はオブジェクトの変更を監視するための $watch メソッドを提供しており、コールバックで 2 つのオブジェクトがそれぞれ返されます。 newValue.

その名前が示すように、これら 2 つのオブジェクトはオブジェクトの変更前と変更後の値です。

しかし、使用中に、これら 2 つの値が常に期待されるわけではないことがわかりました。詳細な紹介を見てみましょう:

データの値を定義します

data: {
 arr: [{
  name: '笨笨',
  address: '上海'
 }, {
  name: '笨笨熊',
  address: '北京'
 }],
 obj: {
  name: '呆呆',
  address: '苏州'
 },
 str: '哈哈哈'
 }

watchを定義します

watch: {
 arr: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 obj: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 str: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 }

イベントトリガーを定義します

methods: {
 test() {
  this.arr.push({
  name: 9
  })
  this.$set(this.obj, 'i', 0)
  this.str = ''
 },
 test1() {
  this.arr = [{
  name: '000'
  }]
  this.obj = {
  name: 999
  }
  this.str = '123'
 }
 }

テスト結果は次のとおりです

1. を押してくださいarray Obj に対する操作と $set 操作の両方が監視イベントをトリガーする可能性がありますが、コールバックによって返される結果では、oldValue と newValue は同じです。文字列オブジェクトは期待どおりに戻ります

2. 配列やObjに値を割り当てると、トリガーを監視し、oldValueとnewValueが期待どおりに戻ります

watchに関するその他のテスト

モニタリングをトリガーできません

1、配列

添字の属性の値を変更する

ネイティブ削除を使用して属性を削除する

属性を添字に追加する（$set を使用せず）

特定の末尾を再割り当てする

2. オブジェクト

特定の属性の値を変更します (ただし、この属性の監視がトリガーされます) 属性を削除します

上記の概要には欠点がある可能性があります

監視監視は Wanbaoyou で実装されています

データを変更した後にこのようなコードを追加します

array

arr = [...arr]

obj

obj = {...obj}

概要

以上がvue.js の $watch の oldvalue と newValue の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。