vue の計算プロパティと監視の違いは何ですか?

相違点: 1. 計算された属性は呼び出されたときにテンプレートでレンダリングされる必要があり、計算が依存するメタデータは変更されます。watch は呼び出されたときにメタデータを変更するだけで済みます。 2. 計算された属性はデフォルトで深い依存関係に設定され、監視はデフォルトで浅い観察に設定されます。 3. 計算された属性はフィルタリングに適していますが、非同期にすることはできません。watch は非同期操作や負荷の高い操作に適しています。

#computed##computed は計算プロパティです。データに基づいて計算されます。新しい計算結果を動的に表示する

計算されたプロパティは Vue インスタンスに追加されます。すべてのゲッターとセッターの this コンテキスト

は、計算されたプロパティを通じて Vue インスタンス

に自動的にバインドされます

呼び出す必要はありません

DOM で直接使用できます

基本的な例

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

結果:

私は元の値です: "Hello"

私は計算された属性の値です: "olleH "

計算された属性を使用しない場合、message.split('').reverse().join('') がテンプレートに直接書き込まれます。そうすると、テンプレートに宣言的なロジックが多すぎます。テンプレート自体が重くなりすぎます。特に、ページ内のデータを処理するために多数の複雑な論理式が使用される場合、

はページの保守性に大きな影響を及ぼします。

##そして、計算された属性の依存関係が変更されない場合、それはキャッシュになり、計算された値は再計算されません

##したがって、データを複雑なロジックを通じて取得する必要がある場合は、計算されたプロパティを使用することをお勧めします

watch

オブジェクト。キーはデータに対応するデータ、値は対応するコールバック関数です。値は、メソッド名、またはオプションを含むオブジェクトにすることもできます。データ データが変更されると、コールバックが発生します。これには、val (変更されたデータ データ) と oldVal (元のデータ データ) の 2 つのパラメータがあります。)

Vue インスタンスはインスタンス化時に $watch() を呼び出し、監視オブジェクトの各プロパティを走査します。

基本的な例

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += &#39;hi&#39;">obj.a + 'hi'</button>
      <button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

注:

ウォッチャー関数を定義するためにアロー関数を使用しないでください。アロー関数には this がなく、this はその親関数を継承しますが、その親関数は window であるため、アロー関数はこのポイントに到達します。 Vue インスタンスではなくウィンドウに接続します

このオブジェクトのプロパティの変更を確認するかどうかをディープ制御します

• 即時はそれが最初であるかどうかを制御しますtime レンダリングはこの関数を実行することです
• vm.$watch() 使用法は watch コールバック

vm と似ています。 $watch(' データ属性名', fn, {ディープ: .., 即時: ..})

vm.$watch("n", function(val, newVal){
      console.log("n 变了");
},{deep: true, immediate: true})

vue 計算プロパティと watch
• の違い

計算されたプロパティとプロパティの検出

##計算されたプロパティ (計算された)呼び出し時にテンプレートでレンダリングする必要があります。計算が依存するメタデータを変更しますデフォルトの深い依存関係非同期ではなくフィルタリングに適していますデータの一部が複雑な計算を行う必要がある場合は、computed を使用します。データを監視する必要があり、データに対して操作を実行する必要がある場合は、watch を使用します。関連する推奨事項:

#プロパティ検出 (監視)	最初の実行初めて実行されません
メタデータの変更が必要なのは呼び出し時のみです
デフォルトの浅い観察
非同期またはコストのかかる操作に適しています

##2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 最新の 5 つの vue.js ビデオ2020 年のチュートリアルの選択

プログラミング関連の知識については、プログラミング教育をご覧ください。 ！

以上がvue の計算プロパティと監視の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。