Vue起步（計算屬性、監聽屬性）

Vue.js 計算屬性

計算屬性關鍵詞: computed。

計算屬性在處理一些複雜邏輯時是頗有用的。

沒有使用計算屬性時的反轉字符串例子：

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

使用計算屬性的實例：

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算後反轉字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Chenih!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

提供的函數將用做屬性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依賴於 vm.message，在 vm.message 發生改變時，vm.reversedMessage 也會更新。

咱們能夠使用 methods 來替代 computed，效果上兩個都是同樣的，可是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值。而使用 methods ，在從新渲染的時候，函數總會從新調用執行。

computed性能會更好，若是不但願緩存，能夠使用methods屬性。

Vue.js 監聽屬性

能夠經過watch來響應數據的變化。

<div id="demo7">
			公里：<input type="text" v-model="kilometers" />
			米：<input type="text" v-model="meters" />
		</div>
		<p id="info"></p>

<script>
				var chvm = new Vue({
				el:"#demo7",
				data:{
					kilometers: 0,
					meters: 0
				},
				methods:{},
				comments:{},
				watch:{
					kilometers: function(val){
						this.kilometers = val;
						this.meters = this.kilometers * 1000
					},
					meters: function(val){
						this.kilometers = val / 1000;
						this.meters = val;
					}
				}
			});
			// $watch是一個實例方法
			chvm.$watch('kilometers', function (newValue, oldValue){
				document.getElementById('info').innerHTML = "修改前值爲" + oldValue + '--' + "修改後值爲" + newValue;
			})
			
</script>