vue watch 路由监听 属性监听

作为小白，在开发中我遇到一个问题，想要实现改变输入内容就再次发送ajax请求的功能。

有两种情况：

第一种是父组件与子组件通过props属性进行通信，这时候我想要判断是否需要再次发送ajax请求，是通过监听传过来的props属性来实现的。这里我当时没有理解watch是怎么监听的，傻乎乎的定义了一个中间变量，其实watch监听,只需要将要监听的属性作为函数名就可以了，函数会有两个参数oldValue,newValue,在watch里会自动判断该属性的值是否发生变化。所以通过父子组件传值的方法可以直接调用函数发送ajax请求，下图中监听的就是从父组件传过来的属性prop，然后直接调用axiosData()(我自己创建的ajax请求方法)。

第二种情况是路由跳转。这里要注意监听的就不是路由传过来的值，而是整个路由('$route')，和属性监听一样，将'$route'作为函数名自动监听路由参数值的变化。这里还需要注意一点，虽然能自动监听到路由参数的变化，但是在你再次发送ajax请求时，此时的路由参数并没有被赋予新的值，所以要先将传过来的参数值赋值给路由参数，再次发送ajax请求才能获取最新的数据。下图中，监听路由'$route'，并通过this.keyword = this.$route.query.keyword，将最新的值赋给路由参数，再次发送ajax请求，获取最新数据。

 

通过监听实现不间断搜索功能还有一个注意点，就是如果是引用型变量，再次被赋值时，并不会覆盖之前的值，所以每次需要重置一下引用型变量的值。