vue watch用法,监听路由

第一种直接监听一个字段

vue watch用法,监听路由_第1张图片

结果如下:

vue watch用法,监听路由_第2张图片

vue watch用法,监听路由_第3张图片

通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化

第二种间接监听对象


结果如下:

vue watch用法,监听路由_第4张图片

如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成

第三种 监听对象中的属性

vue watch用法,监听路由_第5张图片

效果如下:

vue watch用法,监听路由_第6张图片

第四种:监听对象中的所有属性的变化

vue watch用法,监听路由_第7张图片


注意细节:watch 监听是从第一次赋值都开始监听了


vue watch用法,监听路由_第8张图片

监听路由:

vue watch用法,监听路由_第9张图片

最后需要注意的是:

只要是监听的是路由,不管是子组件还是父组件还是没有相关连的组件,只要路由(不论是哪个地方的路由)发生了变化,这个地方的watch监听到的内部函数都会执行,

vue watch用法,监听路由_第10张图片

原因就是路由在开始的时候就已经进行了注册,所以路由是全局的,所以这里的监听也是全局的

 

你可能感兴趣的:(vue,前端)