Vue入门（5）侦听及计算属性

1.侦听器

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch监听的是单个属性

基本数据类型：简单监听

<div id="app">
	<input type="text" v-model="msg" />
    <h2>{{msg}}</h2>
</div>
<script>
	new Vue({
		el:'#app',
		data(){
	        return{
	            msg : ""
	        }
        },
        watch:{
            msg : function(newV,oldV){
                console.log(newV,oldV);
            }
        }
	})
</script>

复杂数据类型：深度监听

<div id="app">
	<div>
        <p>obj.a: {{obj.a}}</p>
        <p>obj.a: <input type="text" v-model="obj.a"></p>
    </div>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
		    obj: {a: 123}
		},
		watch: {
		    obj: {
		        deep : true,
		        handler(newV, oldV) {
		            console.log('obj.a changed');
		        },
		    }
		} 
	})
</script>

2.计算属性

对于任何复杂逻辑，你都应当使用计算属性

<div id="app"></div>

<script>
    var vm = new Vue({
        el : '#app',
        template : `
            <div>
                <p>Original message: "{{ message }}"</p>
                <p>Computed reversed message: "{{ reversedMessage }}"</p>
            </div>
        `,
        data : function () {
        	return {
				message : "hello"
			}
            
        },
		computed : {
            reversedMessage : function(){
                return this.message.split('').reverse().join('')        
            }
        }
    })
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于
A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。