ggggxc学习笔记----Vue学习笔记IV----计算属性、监听属性

六、计算属性（computed）：一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性

1. 在双大括号中直接使用表达式获取结果

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

2. 在Vue定义参数中添加computed属性，或者是在methods中添加方法

例：

<div id="example">
 	<p>Computed reversed message: {{ reversedMessage }}</p> 
	<p> {{reversedMessageMethod() }}</p>
</div>
computed: { 
	// 计算属性的 getter 
	reversedMessage: function(){return this.message.split(‘’).reverse().join(‘’) } }
methods: { 
	// 计算属性的 getter 
	reversedMessageMethod: function(){return this.message.split(‘’).reverse().join(‘’) } }

       计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。

七、监听属性（watch）：当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最有用的

watch: {   
// 如果`question`发生改变，这个函数就会运行这里如果question是引用类型，只有当引用地址发生变化才能被监测
	question: function (newQuestion, oldQuestion) { 
	    this.answer = 'Waiting for you to stop typing...'
	},
// deep为true表示深度监听，如果question为对象，deep表示question内部属性值变化也可以监听到
	question: {
	    handler:function (newQuestion, oldQuestion) { 
	        this.answer = 'Waiting for you to stop typing...'
	    } ,
	    deep:true
	}
}