精华内容
下载资源
问答
  • 主要介绍了vue watch普通监听和深度监听(数组和对象),文中单独通过代码给大家介绍了vue watch 深度监听的方法,感兴趣的朋友一起看看吧
  • watch 深度监听

    2020-08-22 08:39:46
    当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时需要deep属性对对象进行深度监听 data () { return { form: {id: 1, name: 'milky'} } }, watch: { form: { handler...

    当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时需要deep属性对对象进行深度监听

    data () {
       		return {
    		 form: {id: 1, name: 'milky'}
    	}
      },
      watch: {
        form: {
          handler(newVal, oldVal) {
          // ...
        },
        deep: true,
        immediate: true
        }
    
    immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
    

    如果只需要监听对象中的一个属性值, 可以使用字符串的形式监听对象属性:

    data () {
       		return {
    		 form: {
    		 	name: 'milky',
    			age: 18
    		}
    	}
      },
      watch: {
        "form.name": {
          handler(newVal, oldVal) {
          // ...
        },
        deep: true,
        immediate: true
        }
    
    展开全文
  • 监听到变化时应该执行的函数。 deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。) immediate:其值是true或false;确认是否以当前的初始值执行...
    • handler:其值是一个回调函数。即监听到变化时应该执行的函数。
    • deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
    • immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

    watch用法

    第一种用法

    当a,b值发生改变时执行

    var vm = new Vue({
    	data: {
    		a: 1,
    		b: 2
    	},
    	watch: {
    		a: function (val, oldVal) { //监控的家伙变化时,需要执行的函数
    			console.log('new: %s, old: %s', val, oldVal)
    		},
    		b: 'someMethod',// 也可以是方法名,监控的家伙变化时,需要执行的函数(用引号)
    	}
    })
    

    第二种用法

    初始化执行handler的函数

    var vm = new Vue({
    	data: {
    		c:{
    			d:1,
    		}
    	},
    	watch: {
    		// 选项的对象
    		c: {
    			handler: function (val, oldVal) {//回调函数。即监听到变化时应该执行的函数
    				console.log('new: %s, old: %s', val, oldVal)
    				//当数据到来的时候, DOM 更新循环结束之后,立即执行函数
    			},
    			immediate: true //确认是否以当前的初始值执行handler的函数
    		}
    	}
    })
    

    第三种用法

    深度监听,当对象c中任何值发生变化时执行handler的函数

    var vm = new Vue({
    	data: {
    		c:{
    			d:1,
    		}
    	},
    	watch: {
    		// 选项的对象
    		c: {
    			handler: function (val, oldVal) {//回调函数。即监听到变化时应该执行的函数
    				console.log('new: %s, old: %s', val, oldVal)
    				//当数据到来的时候, DOM 更新循环结束之后,立即执行函数
    			},
    			deep: true,//深度监听
    		}
    	}
    })
    

    注销watch

    为什么要注销 watch?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watch 其实就没用了,这时候我们应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的,他会随着组件的销毁而销毁。

    new Vue({
    	data: {
    		text: 0
    	},
    	watch: {
    		text:function(val, oldVal){
    			console.log('new: %s, old: %s', val, oldVal)
    		}
    	}
    });
    

    但是,如果我们使用下面这样的方式写 watch,那么就要手动注销了,这种注销其实也很简单

    const unWatch = app.$watch('text', (val, oldVal) => {
    	console.log('new: %s, old: %s', val, oldVal)
    })
     
    unWatch(); // 手动注销watch
    //app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了。
    

    watch监听路由

    可以使用watch来进行路由的监听

    watch: {
        '$route'(to,from){
    		console.log(to);   //to表示去往的界面
    		console.log(from); //from表示来自于哪个界面
        }
    },
    
    展开全文
  • vue——watch深度监听

    2021-07-20 16:42:39
    文章目录watch 的方法和属性【1】handler 方法【2】immediate 属性【3】deep 属性深度监听的方法有哪些?【1】使用 deep 属性【2】使用 computed 计算属性监听 watch 的方法和属性 【1】handler 方法 举个????,...


    watch 的方法和属性

    【1】handler 方法

    举个🌰,代码如下:其实我们平时写的 watch 方法都是会去默认执行这个 handler 方法的

    watch: {
      name: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        }
      }
    }
    

    【2】immediate 属性

    这个属性存在的原因在于 watch 有一个特点:当一个值第一次被绑定时,是不会执行监听函数( watch )的,只有当值发生了改变才回去执行。
    当我们需要在最初绑定值的时候,就对该值执行监听,那就用到了这个属性。
    举个🌰,代码如下:

    watch: {
      name: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        immediate: true
      }
    }
    

    【3】deep 属性

    当需要监听一个对象的改变时,以上的监听方式已经不能满足,原因是受到 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除,导致我们对一个对象的监听是无效的。
    此时,我们需要使用 deep 属性对对象进行深度监听。
    举个🌰,代码如下:

    watch: {
      obj: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        deep: true
      }
    }
    

    [注意] deep 的默认值是 false,为什么?因为使用了 deep 之后,监听器就会一层层的往下遍历,这样做可想而知对性能的开销非常的大,当我们只需要对一个对象里的某个属性进行监听时,可以使用字符串形式监听。如此,Vue 就会一层一层解析下去,直到遇到需要监听的属性,给其设置监听函数。
    举个🌰,代码如下:

    watch: {
      'obj.name': {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        deep: true
      }
    }
    

    深度监听的方法有哪些?

    【1】使用 deep 属性

    举个🌰,代码如下:

    watch: {
      obj: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        // 开启深度监听
        deep: true
      }
    }
    

    【2】使用 computed 计算属性监听

    // 通过计算属性,计算出需要监听的数据
    computed: {
      changed() {
        return this.obj.name
      }
    },
    
    // 不通过deep,仍然可以深度监听计算出来的数据
    watch: {
      changed: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
      }
    }
    
    展开全文
  • vue3.0 watch 深度监听

    千次阅读 2021-02-26 14:45:48
    vue3.0 watch 设置深度监听 <script> import { watch } from 'vue'; export default { props:["filter"], setup(props){ watch( () => { return props.filter }, state => { getStatistics...

    vue3.0 watch 设置深度监听

    <script>
    import { watch } from 'vue';
    export default {
      props:["filter"],
      setup(props){
        watch(
          () => {
            return props.filter
          },
          state => {
            getStatistics(state.value)
          },
          { 
            deep:true
            ...
          }
        )
      }
    }
    </script>

     

    展开全文
  • 这玩意我几乎是第一次用,由于仿PS那种画图的,比较复杂,成功地用到了这种,是用于数据传递第一次不成功,即不是深度监听,比如 我有一个对象,我要监听这个对象,这个对象有x y坐标,只要坐标变一点,都要即时监听的到,于是...
  • vue中watch深度监听

    2021-06-24 09:19:57
    查询资料得知watch里面还有一个属性 deep,默认值是 false,代表是否深度监听,然后修改如下: watch: { // 深度 watcher isdetail6: { handler: function (val, oldVal) { this.querycertificate(val.zwsId) }, ...
  • 深度监听:deep 属性深度监听, 监听复杂数据类型 案例: atch:{ someValue:{ handler(oldVal,newVal){ }, deep:true, immediate: true } } 今日头条极速版邀请码【941363528】 抖音极速版邀请码【8121029958】 快手...
  • vue之watch 深度监听

    2021-02-23 17:55:03
    设定watch监听,deep:true 设置深度监听 当telphone值发生变化时触发handler方法 注意:这里的function不能写成箭头函数,不然this将不在此组件内https://cn.vuejs.org/v2/api/#watch handler函数中的意思就是每次...
  • 由于对象是引用类型地址,修改对象属性 watch正常不会监听到 值类型和引用类型的区别# (1)值类型: 1、占用空间固定,保存在栈中(当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会...
  • 一、watch 深度监听 watch: { formData: { deep: true, handler(nv) { console.log("对象发生改变", nv); }, }, }, 二、使用 $set 改变对象值 created() { // 直接赋值监听无效 // this.formData.name ...
  • vue-watch 深度监听!!

    千次阅读 2019-07-26 14:49:03
    Vue提供了一个watch方法去监听某些data内的数据变动,从而触发相应的操作,当需要在数据变化时执行异步或开销较大的操作时,watch方法是最有用的 一、watch用法 假设有如下代码:下面的代码的效果是,当我们输入...
  • 主要介绍了vue watch深度监听对象实现数据联动的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue中watch深度监听

    2021-10-19 20:58:07
    普通的监听 <input type="text" v-model="user.name"> <input type="text" v-model="user.age"> <script> export default { data(){ return { user: { name: "", age: 0 } } }, watch:...
  • watch的特点是当被监听变量变化时才是执行函数,而在初始化(只有变化才会执行)的时候并不会执行,使用handler与immediate的作用是: 当immediate为false时,与之前的效果相同: 2.deep属性: <div> &...
  • watch深度监听 deep: true

    2021-09-28 14:46:16
    修改成深度监听 deep:true watch: { form: { handler () { //这是vue的规定写法,当你watch的值发生变化的时候,就会触发这个handler,这是vue内部帮你做的事情 console.log(this.form.age) }, deep: true, // ...
  • watch深度监听

    2021-05-31 08:58:51
    watch深度监听两个时间(日期)的变化,比较结束时间不能小于等于开始时间 **思路分析:**结束时间不能小于开始时间,很明显我们需要监听两个时间然后在比较两个时间的差值如果结束时间 — 开始时间 <= 0 则结束...
  • watch :{ //监听type的变化 'temp.type': { handler(type,old) { //这里写你的业务逻辑 console.log('obj.a changed', type); if (type == 1) { this.temp.beforePushTitle = ""+ this.temp.liveName +" 速来...
  • vue—watch深度监听(deep:true)

    千次阅读 2020-11-14 10:12:54
    1、监听数字 ...1、watch加上deep:true之后就是深度监听 2、handler中返回变化后端obj 3、watch第一次加载不执行,数据有变化才会执行,如果需要页面加载完毕执行,那就加上immediate:true与deep同级 ...
  • 我们使用watch监听数据时,有三个选项,handler,deep,immediate 使用 immediate和handler 这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在...
  • 普通单一变量监听和对象深度监听,示例代码如下 data () { return { a: '', obj: {} } } watch: { 'a': function (newVal, oldVal) { // 单一变量监听 console.log(newVal, oldVal) // 打印出来查看一下值...
  • 用字符串的方法来取代深度监听deep:true, //深度监听底层一个一个得遍历,很浪费性能 console.log(a,b) } }, }   转载于:https://www.cnblogs.com/wangqi2019/p/11075470.html
  • Vue watch深度监听

    2021-06-30 16:39:53
    为何深度监听? 当 watch 监听引用类型时拿不到 oldVal data(){ return{ name: 'xxx', info: { name: 'xxx' } } }, watch:{ name(oldVal,val){ // 监听值类型不用深度监听 console.log(oldVal,val) }...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,694
精华内容 3,477
关键字:

watch深度监听