レスポンシブ原則の詳細

目次

• 変更を追跡する方法

• 変更の検出に関する注意事項

• リアクティブ プロパティの宣言

• 非同期更新キュー

変更を追跡する方法

通常の JavaScript オブジェクトを data オプションとして Vue インスタンスに渡すと、Vue はオブジェクトのすべてのプロパティを反復処理し、Object.defineProperty を使用してすべてのプロパティを変換します。これらのプロパティを getter/setter に設定します。 Object.defineProperty は ES5 の機能でシム化できません。そのため、Vue は IE8 以前のブラウザをサポートしません。

これらのゲッター/セッターはユーザーには見えませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされ変更されたときに変更を通知できるようにします。ここで注意すべき点は、コンソールにデータ オブジェクトを出力する際、ブラウザーによってゲッター/セッターの形式が異なるため、データを検査するためのより使いやすいユーザー インターフェイスを取得するために vue-devtools をインストールすることをお勧めします。

各コンポーネント インスタンスは watcher インスタンスに対応し、コンポーネントのレンダリング プロセス中に「タッチされた」データ属性を依存関係として記録します。その後、依存関係のセッターが起動すると、ウォッチャーに通知され、関連するコンポーネントが再レンダリングされます。

#変更の検出に関する注意事項

Object.observe も非推奨になりました)、Vue はオブジェクト プロパティの追加または削除 を検出できません。 Vue はインスタンスの初期化時にプロパティのゲッター/セッター変換を実行するため、Vue がリアクティブに変換するにはプロパティが data オブジェクトに存在する必要があります。例:

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

Vue.set(object, propertyName, value) メソッドを使用して、ネストされたオブジェクトにリアクティブ プロパティを追加できます。たとえば、次の場合:

Vue.set(vm.someObject, 'b', 2)

Vue.set メソッドのエイリアスでもある vm.$set インスタンス メソッドを使用することもできます。 ##

this.$set(this.someObject,'b',2)

Object.assign() や _.extend() を使用するなど、複数の新しいプロパティを既存のオブジェクトに割り当てる必要がある場合があります。ただし、この方法でオブジェクトに追加された新しいプロパティは更新をトリガーしません。この場合、ブレンドしたいオブジェクトのプロパティとともに、元のオブジェクトから新しいオブジェクトを作成する必要があります。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

配列関連の考慮事項もいくつかあります。これについては、リストのレンダリングで説明しました。

リアクティブ プロパティを宣言する

Vue ではルートレベルの動的追加が許可されていないため、リアクティブ プロパティのプロパティであるため、たとえそれが null 値であっても、インスタンスを初期化する前にすべてのルートレベルのリアクティブ プロパティを宣言する必要があります。


var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'

data で宣言しない場合 オプション メッセージ、Vue は、レンダー関数が存在しないプロパティにアクセスしようとしていると警告します。

この制限の背後には技術的な理由があり、依存関係追跡システムの一種のエッジ ケースが排除され、Vue インスタンスが型チェック システムとより適切に連携できるようになります。しかし同時に、コードの保守性の観点から重要な考慮事項があります。data オブジェクトはコンポーネント状態のスキーマのようなものです。すべてのリアクティブ プロパティを前もって宣言すると、コンポーネント コードが将来変更されるとき、または他の開発者が読み取るときに、コンポーネント コードが理解しやすくなります。

#非同期更新キュー

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}