Vueデータ関連属性のまとめ

vueのデータ関連属性は簡単ではなく、同じ実装で互いに変換され、どの属性を使うべきか分からないこともあります.次に,vueを使用する初心者の参考にするために,各種データ関連属性の使用シーンと制限を整理する.
まず、データに関する属性を整理します.

data

v-model

computed

props

watch 

data
data属性はvueの中で最も簡単なデータ属性であり、このvueインスタンスを表すデータであり、その定義方法は以下の通りである.

const app = new Vue({  
  data: {    
    message: '...',  
  }
})

参照方法は次のとおりです.

app.message = '...'
//    template ， ：   title   
 

//    {{}}          
{{ message }}

注意一下，Vue组件定义时，data必须是function：

const Component = Vue.extend({  
    data: function () {    
        return { a: 1 }  
    }
})

v-model
v-modelは、フォームコントロールまたはコンポーネント上で双方向バインド関係を確立することができ、本質的には文法糖であり、data属性と組み合わせて使用されます.
双方向バインドの定義方法は次のとおりです.

//     ，         

これは文法糖にすぎず、本質的にはinputコントロールをバインドしたvalue属性とinputイベントである.

//      v-model     

コンポーネントの本質は次のように実現されます.

//       v-model     

v-modelのカスタムコンポーネントでの使用はinputイベントに自動的にバインドされ、カスタムコンポーネントはvalueの変更を検出すると、inputイベント:this.$emit('input', newValue) をトリガーしてvalueの変更を親コンポーネントのsomethingプロパティに渡すことができます.
computed
テンプレートに複雑な論理をバインドする計算プロパティ.依存するプロパティが変更されると、計算プロパティも変更されます.
定義方法:

const app = new Vue({  
  computed: {    
    reversedMessage() {      
      return ...    
    }  
  }
})

計算プロパティのプロパティ「依存するプロパティが変更されると、その計算プロパティも変更されます」は、関数で実現することもできます.関数方式で実装されるコードは次のとおりです.

const app = new Vue({
  methods: {
    reversedMessage() {
      return ...
    }
  }
})
{{ reversedMessage() }}

両方の方法の結果は同じですが、計算プロパティは依存キャッシュに基づいており、関数の更新プロパティ値を毎回実行する必要がなく、関連する依存が変更された場合にのみ値を再取得します.
属性を計算する参照方法はdata属性と同じであり、テンプレート内のデータバインドとしてもコンポーネント属性にバインドしてもよい.ここでは説明しない.
props
propsは、親コンポーネントがサブコンポーネントにデータを渡すために使用され、コンポーネントで定義および使用方法は次のとおりです.

Vue.component('child', {
  props: ['myMessage'],
})

注意:propsではアルパカネーミング法、コンポーネントプロパティでは短横線ネーミング法です.
watch
watchは,属性送信の変化を観察した後,追加処理を行うために用いられる.
computed属性との違いは,作用対象が異なり,watchは変化の源を観察し,computed属性は変化の目標であり,もちろん両者は互いに変換できる.両者がどのように取捨選択されるかは、変化するソースとターゲットのどの部分の属性がより多く、複数のソース属性の変化が1つのターゲット属性に影響を与える場合はcomputedを使用することを推奨する.逆に、1つのソース属性の変化が複数のターゲット属性に影響を及ぼす場合は、watchを推奨します.
first nameとlast nameを組み合わせたfull nameを実現するには、watchによって実現することができる.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

computedプロパティで実装すると、より簡素になります.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
}) 

まとめ
Vueにはデータ関連の属性が多く、初心者は一時的にどのように選択すればいいか分からない.本稿では,各属性が設計された目的,使用シーン,および特性,さらにはより深い実装原理を知ることができ,これにより,属性の大部分が選択された場合に対応できる.