Vue中的事件监听watch

• 用法一：直接监听某个属性

<div id="app">

<input type="text" v-model="name" />

{{name}}

</div>

new Vue({

el: '#app',

data: {

name: ''

},

watch: {

name(newVal, oldVal) {

console.log('newVal:', newVal, '========', 'oldVal:', oldVal)

}

}

})

• 效果

• 用法二： 监听某个方法

<div id="app">

<input type="text" v-model="name" />

{{name}}

</div>

new Vue({

el: '#app',

data: {

name: ''

},

watch: {

name: 'changeName'

},

methods: {

changeName () {

console.log(this.name)

}

}

})

• 效果

• 用法三：有时我们需要页面一加载就执行监听函数可以使用下面的方法

<div id="app">

<input type="text" v-model="name" />

{{name}}

</div>

new Vue({

el: '#app',

data: {

name: 'aaa'

},

watch: {

name: {

handler (newVal, oldVal) { // 此处handler必须写，这就是我们所监听触发的事件

console.log(newVal, oldVal)

},

immediate: true // 这个设置就表示在页面一加载就执行该函数

}

},

methods: {

changeName () {

console.log(this.name)

}

}

})

• 用法四： watch监听默认只监听第一层，也就是说如果我们要监听一个对象或者数组中的值的变化，并不会触发监听事件

• 这时我们就需要使用deep: true属性来告诉watch我们需要进行深度监听，这时就可以监听对象和数组中的值的变化了

• 没有使用deep: true

<div id="app">

<input type="text" v-model="fruits.name" />

{{fruits}}

</div>

new Vue({

el: '#app',

data: {

fruits: {

name: 'apple',

color: 'red'

}

},

watch: {

fruits: {

handler (newVal, oldVal) {

console.log(newVal, oldVal)

}

}

},

methods: {

changeName () {

console.log(this.name)

}

}

})

• 效果
  

• 可以看到没有使用deep: true时控制台并没有打印东西，这说明watch监听并没有被触发

• 使用deep: true属性

<div id="app">

<input type="text" v-model="fruits.name" />

{{fruits}}

</div>

new Vue({

el: '#app',

data: {

fruits: {

name: 'apple',

color: 'red'

}

},

watch: {

fruits: {

handler (newVal, oldVal) {

console.log(newVal, oldVal)

},

deep: true

}

},

methods: {

changeName () {

console.log(this.name)

}

}

})

• 效果
  
• 可以看到使用了deep: true之后，控制台有输出