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

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

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

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

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

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"

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

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

watch

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
• の違い

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

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

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

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

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