vue是如今前端开发中常见的框架之一，关于vue框架的使用就成了前端基础项。本篇文章就来介绍vue框架常见的功能项之一。

数据的改变是页面中必不可少的操作，那么当数据进行变化后。我们可以如何通过监听数据的变化来进行前后数据对比并进行操作呢。

vue中关于数据的监听就不得不提到watch，通过对watch的使用可以监听到data中数据改变的操作。

uni-app中数据深度监听并进行操作，详细代码如下：

<script>
	export default {
		data() {
			product:{
				post:{
					page:1,
					limit:10,
					city:''
				},
				total:0,
				list:[]
			}
		},
		watch: {
		    // 监听city数据的变化
		    'product.post.city': {
		        handler(newValue, oldValue) {
		          console.log(newValue)
		          console.log(oldValue)
		        },
		        deep: true,
		        // immediate: true
		      }
		}
	}
</script>

watch数据参数说明：

    deep：其值是 true 或 false ；确认是否深入监听。

    immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。就是说在页面初始化后会立即执行