vue.js計算プロパティcomputed(getterとsetter)

vue.js計算プロパティcomputed(getterとsetter)

computedは自分で定義した変数を監視するために使用され、この変数はdataで宣言されず、直接computedで定義され、ページ上で双方向のデータバインドを行い、結果を示すか、他の処理として使用することができる.computedは複数の変数やオブジェクトを処理して結果値を返すのに適しています.つまり、複数の変数のいずれかの値が変化すると、私たちが監視しているこの値も変化します.例えば、カートの中の商品リストと総額の関係は、商品リストの中の商品の数が変化すれば、商品を減らしたり増やしたり削除したりして、総額は変化しなければならない.ここでのこの総額はcomputed属性を用いて計算するのが最善の選択です.

属性VSメソッドの計算:computedブロック内のfullName関数をmethodsに全体的に移動します.同時にテンプレートで{fullName}}を{fullName()に置き換えます.この2つの方式の出力の結果は同じであるが,性能は破壊的な打撃を受けるであろう.この方法を使用してfullName()メソッドは、ページレンダリングのたびに実行され、パフォーマンスが低下します.Vueでの計算属性は、それらの依存に基づいてキャッシュされ、方法はそれらの依存に基づいてキャッシュされません.これにより、計算プロパティを使用すると、メソッドよりもパフォーマンスが向上します.

計算プロパティを使用すると、指定したビュー、複雑な値を計算できます.これらの値は依存値、

にバインドされます.

紹介:Vueでは、computedの属性はdataのように読み取って設定できるので、computedではgetter(読み取り)とsetter(設定値)に分けることができ、一般的にはsetterがない、computedプリセットはgetterのみ、つまり読み取りのみ、設定値

は変更できない.

vue.js計算属性のデフォルトはgetterのみであり、デフォルト値であるため、以下のコード

を省略することもよくあります.

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

実はcomputedの中のコードの完全な書き方は

であるべきです

 computed: {
    fullName: {
      get(){
         return this.firstName + ' ' + this.lastName
      }
    }
  }

属性getterのトリガ時間

を計算する

   

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'zhang',
    lastName: 'san'
  },
  computed: {
    fullName: function () {
      console.log('computed getter...')
      return this.firstName + ' ' + this.lastName
    }
  },
  updated () {
     console.log('updated')
  }
})

上のコードの2つの入力ボックスの値firstNameまたはlastNameを変更すると、computedおよびupdated()がトリガーされます.つまり、console.log(‘computed getter...’)とconsole.log(‘updated’)

注意しなければならないのは、getterで使用する変数を変更するとcomputedの更新がトリガーされるのではなく、computedの値がテンプレートで使用されなければならないことを前提としています.

計算属性setter

  

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'zhang',
    lastName: 'san'
  },
  computed: {
    fullName: {
      //getter   
        get(){
            console.log('computed getter...')
            return this.firstName + ' ' + this.lastName
        }，
   //setter   
        set(newValue){
            console.log('computed setter...')
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
            return this.firstName + ' ' + this.lastName
        }
      
    }
  },
  updated () {
     console.log('updated')
  }
})

templateでは、inputがv-model=「fullName」を直接バインドしていることがわかります.ここでfullNameの値を直接変更すると、setterがトリガーされ、getterおよびupdated関数もトリガーされます.実行順序はsetter->getter->updated

です.

 console.log('computed setter...')
console.log('computed getter...')
console.log('updated')