vue-计算属性和监听器

来源：https://cn.vuejs.org/v2/guide/computed.html

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

//计算属性具有缓存性 ，在页面同时多次调用只执行一次
//一个值由多个值得来 ，适合多个值影响一个值
computed: {
    // 计算属性的 getter  
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

监听器

//适合一个值引起多个值改变是用
watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
     console.log("新数据："+newQuestion)
     console.log("旧数据："+oldQuestion)
    }
  },
  	//课外知识
	// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce

带选项的监听

watch:{
	question:{
		immediate:true, //立即执行，默认情况下watch是不执行的
		deep:true, //深度监听
		handler(newQuestion, oldQuestion){
		 console.log("新数据："+newQuestion)
     	 console.log("旧数据："+oldQuestion)
		}
	}
}