Vue.js 数据监听与深度监视-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44248221/article/details/125180399

vue监听属性_watch

类似于Java中的监听器，用于监听vue中的数据变化

    <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
      </script>

深度监视

监听多级结构多层变化

当被监测对象不是普通变量（比如对象）时，被对象内的（属性）数据变化无法直接监测，因为对象的值保存的是地址，只有当地址发生变化时，才能被watch监测到

所以当被监测对象是一个对象而不是普通变量时，要监测它内部的所有属性（数据）变化时，可以加上 deep:true（deep默认为false）

immediate:ture//初始化时调用方法

<body>
<div id="root">
			
			<h3>a的值是:{{numbers.a}}</h3>
		  <!--numbers对象中的属性a的值发生了变化，但numbers的值保存的是a的地址，a的地址没有发生变化，故numbers的值不变-->
			<button @click="numbers.a++">点我让a+1</button>
			<!--numbers对象中的属性b的值发生了变化，但numbers的值保存的是b的地址，b的地址没有发生变化，故numbers的值不变-->
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
			<!--numbers保存的地址发生变化，故numbers的值改变，能被watch监听到-->
			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
		,
			watch:{
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
				//immediate:ture//初始化时调用handler()
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
				//简写,使用简写时deep,immediate等其他属性不能写
				numbers(newValue, oldValue){
						console.log('numbers改变了');
				}
			}
		})

	</script>