zoukankan      html  css  js  c++  java
  • vue watch 监听详解

    Watch 可以监听计算属性里面值的改变,也可以监听对象属性值的改变,甚至可以监听router改变
    具体写法如下:
    
    一:监听计算属性 (注意:不要在计算属性中改变data中的值,会报错) watch中监听函数名字要与计算属性中函数名一致
    computed:{
      test(){
    	xxxxx
      }
    },
    watch(){
       test(newVal, oldVal){}
    }
    
    二: 监听data上的属性值(非复杂对象)变化  watch中函数名字要与data中属性名一致
    data(){
    	return{
    		test: ‘’
    	}
    },
    watch(){
      test(newVal, oldVal){}
    }
    
    三: 监听data上复杂对象值改变  watch中函数名字要与data中属性名一致
    data(){
    	return{
    		test1: {
    			test2: {
    				test3: ‘8888’
    			}
    		} 
    	}
    },
    watch(){
      test1: {
    	deep: true, // 是否监听复杂对象值改变
    	handle(newVal, oldVal){}
      }
    }
    
    四: 监听路由改变 比如#/test?name=3    变为  #/test?name=4 这种带值url上面参数值的变动监听
    Watch(){
    	$router: {
    		deep: true,
    		handle(newVal, oldVal){}
    	}
    }
    
  • 相关阅读:
    CAN器件
    团队赋能
    电子模拟开关
    名言出处
    危机管理
    隔离技术
    让CSS布局更加直观:box-sizing
    浅谈跨域以WebService对跨域的支持
    给初学者的20个CSS实用建议
    JS中eval处理JSON数据 为什么要加括号
  • 原文地址:https://www.cnblogs.com/yzyh/p/12552142.html
Copyright © 2011-2022 走看看