1.watch监听器会监听data中数据的变化,只要一变化,就能够执行相应的逻辑
2.监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<h1>全名:{{fullName}}</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch: {
firstName(newVal, oldVal) {
console.log(newVal, oldVal)
// 要用一个变量,将得到的数据保存起来
this.fullName = newVal + this.lastName
},
lastName(newVal, oldVal) {
setTimeout(() => {
this.fullName = this.firstName + newVal
}, 200);
}
}
})
</script>
与computed比较:
- 对比computed而言,这个computed性能更好,所以能用computed实现就用computed实现。
- 在涉及到异步数据操作的时候,就只能用watch去实现了。