二十三. watch监视属性

原创已于 2022-03-28 16:07:51 修改 · 692 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-03-27 10:01:53 首次发布

vue2 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了Vue.js中Watch机制的基本概念与使用方法，包括如何设置watch来响应数据变化，深度监听对象内部属性变化的方法，以及实际项目中监听路由变化的应用案例。

一. 知识点

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！
监视的属性中可配置多个选项，如handle()、deep、immediate
handler默认传参被监视属性的新值和旧值。
监视的两种写法：(1).new Vue时传入watch配置 (2).通过vm.$watch监视
深度监视：
（1）Vue中的watch默认不监测对象内部值的改变（一层）。
（2）配置deep:true可以监测对象内部值改变（多层）。
（3）若全部修改内部值，则外部可监视到
监视的简写形式：当监视对象只配置handler()函数时，可省略handle()函数，

二. 语法模板举例

这里只演示第一种方式——.new Vue时传入watch配置

watch:{
	isHot:{ //isHot是被监视的属性
		immediate:true, //初始化时让handler调用一下
		deep:true, //是否开启深度监视？默认false
		//handler什么时候调用？当isHot发生改变时。handler默认传参被监视属性——handler的新值和旧值。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}
}

简写形式：

watch:{
	//handler默认传参被监视属性——handler的新值和旧值，由被监视属性isHot接收
	isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
}

三. 项目实战举例

1. 尚品汇45集，监听路由

路由发生变化，就会被监听到。
$route不用加this，为什么？$route和data中的数据同级，以前监听data中的数据不用this，这里监听 $route也不用加this。

watch: {
  //监听路由的信息是否发生变化，如果发生变化，再次发起请求
  $route(newValue, oldValue) {
    //分类名字与关键字不用清理：因为每一次路由发生变化的时候，都会给他赋予新的数据
    this.searchParams.category1Id = undefined;
    this.searchParams.category2Id = undefined;
    this.searchParams.category3Id = undefined;
    //每一次请求完毕，应该把相应的1、2、3级分类的id置空的，让他接受下一次的相应1、2、3
    //再次发请求之前整理带给服务器参数
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
    //再次发起ajax请求
    this.getData();
  },
},