vue的监听机制

vue的监听机制

v-on

可以用 v-on 指令监听DOM事件，并在触发时运行一些JavaScript代码。
注意: 事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

watch

1. 监听路由发生变化

watch:{
  $route(to,from){
    console.log(to.path);
  }
}

或

watch: {
  $route: {
    handler: function(val, oldVal){
      onsole.log(val);
    },
    // 深度观察监听
    deep: true
  }
}

或

watch:{
   '$route':'getPath'
},
methods: {
    getPath(){
      console.log(this.$route.path);
    }
}

2. 监听数据变化
   使用这个属性，可以监听data中指定的数据变化，然后触发这个watch中对应的Function处理函数

computed

计算属性：

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

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

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。 所以，对于任何复杂逻辑，你都应当使用计算属性。

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

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
    // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

//计算属性缓存 vs 方法 TODO

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch————特别是如果你之前用过AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的watch回调。

//计算属性 vs 侦听属性
<div id="demo">{{ fullName }}</div>

var vm = new Vue({
	el: '#demo',
	data: {
	  firstName: 'Foo',
	  lastName: 'Bar',
	  fullName: 'Foo Bar'
	},
	watch: {
	  firstName: function (val) {
	  	this.fullName = val + ' ' + this.lastName
	},
	  lastName: function (val) {
	  	this.fullName = this.firstName + ' ' + val
	  }
	}
})

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

var vm = new Vue({
	el: '#demo',
	data: {
		firstName: 'Foo',
		lastName: 'Bar'
	},
	computed: {
		fullName: function () {
		  return this.firstName + ' ' + this.lastName
		}
	}
})

计算属性的setter

计算属性默认只有getter，不过在需要时你也可以提供一个setter：

computed: {
	fullName: {
		// getter
		get: function () {
		  return this.firstName + ' ' + this.lastName
		},
		// setter
		set: function (newValue) {
		  var names = newValue.split(' ')
		  this.firstName = names[0]
		  this.lastName = names[names.length - 1]
		}
	}
}

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

转载于:https://my.oschina.net/yardbaby/blog/3010902