Vueの基本的な説明-Vueのcomputedとwatchの使用シーンと方法

watchとcomputedは、Vueの依存追跡メカニズムに基づいて、あるデータ(依存データと呼ばれる)が変化すると、このデータに依存するすべての「関連」データが「自動的に」変化し、つまり関連する関数を自動的に呼び出してデータの変動を実現することを処理しようとしています.
methodsは関数を定義するために使用され、手動で呼び出す必要があります.「fuc()」のように呼び出す必要があります(関数がfucであると仮定します).
computedは計算属性で、実際にdataオブジェクトのデータ属性と同じクラス(使用上)で、値を取るときにthisを使います.fullNameが取りに行くのは、dataを取るのと同じです(関数として呼び出さないでください!!)
watchとcomputedはそれぞれ処理するデータ関係シーンが異なる.watchの処理が得意なシーン:1つのデータが複数のデータに影響する.computedの処理が得意なシーン:1つのデータが複数のデータの影響を受ける
computedはmethodsに比べて、computedにはキャッシュがあり、性能オーバーヘッドが小さい.computedキャッシュとは何か.number(computedに関連しないデータのいずれか)を変更すると、アプリケーション全体が再レンダリングされ、getName()メソッドを使用している場合、このメソッドは繰り返し呼び出され、computedは再計算されず、依存する値が変化した場合(この例ではnumberはcomputed依存の値ではない)のみ再計算されます.これがcomputedのキャッシュです

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    

      
Name: {{name}}
      
Name: {{getName()}}
      
Number: {{number}}
      
FullName: {{fullName}}
      

      
FirstName: 
      
LastName: 
      
Name: 
      
Obj.a: 
    
  `,
  data: {
    firstName: 'Wang',
    lastName: 'HaiLi',
    number: 0,
    fullName: '',
    obj: {
      a: 0
    }
  },
  computed: {
    name: {
      get () {
        console.log('new name')
        return `${this.firstName} ${this.lastName}`
      },
      set (name) {
        const names = name.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
      }
    }
  },
  watch: {
    'obj.a': {
      handler () {
        console.log('obj.a changed')
        // this.obj.a += 1 //    watch computed     ，     
      },
      immediate: true //             ，       ,  true        
      // deep: true
    }
  },
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})

君と共に励ます:どんなに牛が追い詰める夢でも、馬鹿に追い詰めるような堅持には耐えられない.