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>