作用：侦听属性，响应数据（data&computed）的变化，当数据变化时，会立即执行对应函数，其属性值可以为函数、字符串、对象和数组。

1.属性值类型

（1）函数类型

函数类型中，被侦听的数据作为函数名，当数据改变时，执行 watch() 中对应的函数，该函数可以接受两个参数，第一个参数是 newVal（改动后的数据），第二个参数是 oldVal （改动前的数据），如下例

<div id="app">{{ bookName }} </div> const vm = new Vue({el: '#app',data: {bookName: '《JavaScript设计模式》'},watch: {bookName(newVal, oldVal) {console.log('newVal:', newVal)console.log('oldVal:', oldVal)}} })

【结果】在控制台改变bookName的值，打印结果如下

（2）字符串类型

key 为 被侦听的数据，value 为方法名字，当被侦听的数据改变时，会执行该方法，如下例

<div id="app">{{ bookName }} </div> const vm = new Vue({el: '#app',data: {bookName: '《JavaScript设计模式》'},methods:{bookNameChange(){console.log(this.bookName);}},watch: {bookName: 'bookNameChange'} })

【结果】

（3）对象类型

对象类型包含3个属性，handle函数（必选），deep和immediate（可选） 

1）handler

handler 为被侦听的数据改变时执行的回调函数，其值类型为函数 / 字符串（函数名）

<div id="app">{{ bookName }} </div> const vm = new Vue({el: '#app',data: {bookName: '《JavaScript设计模式》',},watch: {bookName: {handler() {console.log(this.bookName)}}} })

【结果】改变 bookName 的值，执行 handler 函数

2）deep 

在默认情况下，侦听器侦听对象只侦听引用的变化，只有在给对象赋值时它才能被监听到，所以需要使用 deep 选项，让其可以发现对象内部值得变化，讲 deep 得值设置为 true，那么无论该对象被嵌套得有多深，都可以被侦听到。但是当对象的属性较多时，性能开销比较大。因此可以选择只侦听对象的某个属性

【例1】

<div id="app">{{ book.press }} </div> const vm = new Vue({el: '#app',data: {book: {bookName: '《JavaScript设计模式》',press: '人民邮电出版社',writer: 'Addy'}},watch: {book: {handler() {console.log('book.press变化了')},deep: true}} })

【结果】

3）immediate

immediate 选项可以使侦听开始后立刻被调用，而不是等待侦听的数据更改后才会调用

<div id="app">{{ book.press }} </div> const vm = new Vue({el: '#app',data: {book: {bookName: '《JavaScript设计模式》',press: '人民邮电出版社',writer: 'Addy'}},watch: {book: {handler() {console.log('handler执行了')},deep: true,immediate: true}} })

【结果】

 4）只侦听对象的某个属性

将对象的属性放在字符串中当作函数名，当该对象中的该属性值发生变化时，执行回调函数

<div id="app">{{ book.press }} </div> const vm = new Vue({el: '#app',data: {book: {bookName: '《JavaScript设计模式》',press: '人民邮电出版社',writer: 'Addy'}},watch: {'book.press'() {console.log('book.press改变了')}} })

【结果】

（4）数组类型

将多种不同值类型写在一个数组中，如下例

<div id="app">{{ bookName }} </div> const vm = new Vue({el: '#app',data: {bookName: '《JavaScript设计模式》'},methods: {bookNameChange() {console.log('运行bookNameChange函数')}},watch: {//字符串// bookName:['bookNameChange']//函数// bookName:[function () {// console.log('bookName改变了')// }]//对象// bookName:{// handler(){// console.log('运行handler函数')// },// deep:true,// immediate:true// }//全部bookName: ['bookNameChange',function () {console.log('运行watch中的函数')},{handler() {console.log('运行handler函数')},deep: true,immediate: true}]} })

【结果】

2.vm.$watch

Vue 实例将会在实例化时调用 $watch，遍历 watch 对象的每一个属性，我们也可以利用 vm.$watch 来实现侦听，用法如下

（1）侦听某个数据

有两种方法，第一种接收三个参数，第一个为被侦听的数据，第二个为数据改变时执行的回调函数，第三个可选，为设置的选项；第二种接受两个参数，第一个参数为被侦听的数据，第二个参数为选项对象，其中 handler 函数是数据改变时执行的回调函数，其他属性可选。

【例1】三个参数

<div id="app">{{ book.bookName }} </div> const vm = new Vue({el:'#app',data:{book:{bookName:"《JavaScript设计模式》"}} }) vm.$watch('book',function () {console.log('bookName has changed') },{deep: true,immediate:true })

 【结果】

【例2】两个参数

const vm = new Vue({el:'#app',data:{book:{bookName:"《JavaScript设计模式》"}} }) vm.$watch('book',{handler(){console.log('bookName has changed')},deep:true,immediate:false })

 【结果】

（2）侦听某个对象属性

传参情况同上，举例如下

vm.$watch('book.bookName',{handler(){console.log('bookName has changed')} })

【结果】 

（3） 侦听数据由多个数据得到

当侦听的数据在初始不确定，由多个数据得到时，此时可以将第一个参数写成函数形式，当任何依赖的数据改变时，执行回调函数，如下

<div id="app">{{ bookName }}{{ writer }} </div> const vm = new Vue({el: '#app',data: {bookName: "《JavaScript设计模式》",writer: 'Addy'} }) vm.$watch(function () {// 相当于监听了一个未被定义的计算属性return this.bookName + this.writer },function () {// 当bookName或者writer改变时，执行该函数console.log('At least one of them changed') })

【结果】

【注】在侦听器函数执行后，会返回一个取消侦听器函数， 用来停止触发回调；在带有immediate选项时，不能再第一次回调时取消侦听数据，写法如下

const vm = new Vue({el: '#app',data: {bookName: "《JavaScript设计模式》",writer: 'Addy'} }) //这里只能用var申明变量 var unwatch = vm.$watch('bookName',function () {if (unwatch) { //确保unwatch存在才能调用取消侦听函数unwatch();}console.log('bookName changed') },{immediate:true })

 【结果】

 3.侦听器与计算属性比较

（1）两者都可以观察和响应 Vue 实例上的数据的变动

（2）watch 擅长处理的场景时：一个数据影响多个数据；计算属性擅长处理的场景是：多个数据影响一个数据；

（3）计算属性不能执行异步，因为其有返回值，是同步执行的；侦听器中可以执行异步，可以用来发送请求。

<div id="app">{{ question }} </div> var vm = new Vue({el: '#app',data: {question: '',},watch: {question () {setTimeout(() => {alert(this.question);}, 2000)}} })

总结

以上是生活随笔为你收集整理的Vue属性篇_侦听器watch的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。