精华内容
下载资源
问答
  • watch监听
    2022-02-25 16:04:28

    在vue中可以使用watch来监听数据的变化,监听到数据变化后执行操作;

    watch中的属性

    immediate(立即处理 进入页面就触发)

    deep(深度监听)

    handler(执行函数)

    一般监听:

    export default {
        data(){
            name:"xx"
        },
        watch:{
            //只要name的值发生变化,watch就会被调用,
            name(newVal, oldVal){
                //oldVal是name发生变化之前的值
                //newVal是name发生变化之后的值
                consloe.log("newVal","oldVal")
            }
        }
    }

    immediate和handler
    这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

    比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

    监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

    immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

    export default {
        data(){
            name:"xx"
        },
        watch:{
            //只要name的值发生变化,watch就会被调用,
            name{
                handler(newVal, oldVal){
                    //oldVal是name发生变化之前的值
                    //newVal是name发生变化之后的值
                    consloe.log("newVal","oldVal")
                },
    
                //立即执行
                immediate: true
            }
        }
    }

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

    export default {
        data(){
            user:{
                id:1,
                name:"xx"
            },
        },
        watch:{
            //只要name的值发生变化,watch就会被调用,
            user{
                handler(newVal, oldVal){
                    //oldVal是name发生变化之前的值
                    //newVal是name发生变化之后的值
                    consloe.log("newVal","oldVal")
                },
    
                //立即执行
                immediate: true
                //深度监听
                deep: true,
            }
        }
    }

    更多相关内容
  • a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都...
  • 本文实例讲述了Vue开发之watch监听数组、对象、变量操作。分享给大家供大家参考,具体如下: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log...
  • Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch。 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦…)。 小程序...
  • 主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了vue.js使用watch监听路由变化的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件一个默认值(服务端数据还未及时获取),那么,我们就需要实时watch这个prop值,一旦prop值有更新,将立即通知子...
  • * @desc 属性改变监听,属性被set时出发watch的方法,类似vue的watch * @author Jason * @study https://www.jianshu.com/p/00502d10ea95 * @data 2018-04-27 * @constructor * @param {object} opts - 构造...
  • 下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue1.0和vue2.0的watch监听事件写法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue使用watch监听一个对象中的属性的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • watch监听

    2022-05-23 21:37:45
    watch监听 watch监听已存在的数据 支持监听异步的方法 deep:深度监听 <script> data(){ return { from:{ data:" } } }, watch:{ 'from.data'(newArr,oldArr){ console.log(newArr,oldArr); },...

    watch监听

    watch监听已存在的数据
    支持监听异步的方法
    deep:深度监听

    <script>
    data(){
    	return {
    		from:{
    			data:"
    		}
    	}
    },
    watch:{
    	'from.data'(newArr,oldArr){
    		console.log(newArr,oldArr);
    	},
    	deep:true//即可监听from对象中的数据
    }
    </script>
    
    展开全文
  • watch监听在vue2和vue3中的用法详解(全)Vue2中的watch用法Vue3中的watch用法 首先写一个vue页面 <template> <h1>监听一个属性</h1> <p>求和:{{ sum }}</p> <button @click...

    watch监听在vue2和vue3中的用法详解(全)

    首先写一个vue页面

    <template>
    	<div>
    		<h1>监听一个属性</h1>
    		<p>求和:{{ sum }}</p>
    		<button @click="sum++">点我加1</button><br />
    
    		<h2>监听多个属性</h2>
      		<p>{{ tipsmessage }}</p>
      		<button @click="tipsmessage += 1">点我拼接1</button><br />
    
    		<h1>监听对象</h1>
     		<p>姓名:{{ obj.name }}</p>
      		<p>年龄:{{ obj.age }}</p>
      		<button @click="obj.age++">点我加年龄</button><br />
    
    		<h1>监听对象某一个属性变化</h1>
      		<p>薪资:{{ obj.test.salary }}</p>
      		<p>工作年限:{{ obj.test.year }}</p>
      		<button @click="obj.test.salary += 1000">点我涨薪</button>
      		<button @click="obj.test.year++">点我添加工作年限</button>
    	</div>
    
    </template>
    

    Vue2中的watch用法

    <script>
    	data () {
        	return {
          		sum: 12,
          		tipsmessage: 'hell0',
          		obj: {
            		name: '隔壁老王',
            		age: '30',
           		test: {
              		salary: 3000,
              		year: 1
            	}
          	}
        }
      },
      // 方式一:监听data中某个属性值的变化, 如果想要监听多个属性值的变化,可以继续往里面写
      watch: {
        sum(newVal, oldVal){
        	console.log('新值:', newVal)
            console.log('旧值:', oldVal)
       	   },
        tipsmessage (newVal, oldVal) {
            console.log('新值:', newVal)
            console.log('旧值:', oldVal)
           }
       }
    
    // 方式二:监听data中obj对象的变化
    //     这种监听整个对象变化的,需要加上deep,不然监听不到;不能监听到对象下的某个属性值的变化,监听不到具体的值变化,新值和旧值都一样
    	watch: {
                obj: {
                    handler(newVal, oldVal) {
                        console.log('新值:', newVal)
                        console.log('旧值:', oldVal)
                    },
                    deep: true
                }
            }
    // 如果想要监听具体的属性变化,比如 name 、age变化时,才执行handler函数,则有两种方法:需要利用计算属性computed做中间层或者用引号将属性包裹起来
    
    // 方式三: 监听data中obj对象下的某个具体属性的变化  ---- 第一种方法,使用computed做中间层
    		computed: {
                getValue() {
                    return this.obj.age
                }
            },
            watch: {
                getValule(newVal, oldVal) {
                    console.log('新值:', newVal)
                    console.log('旧值:', oldVal)
                }
                // 另一种写法
                getValue: {
                    handler(newVal, oldVal) {
                        console.log('新值:', newVal)
                        console.log('旧值
                        :', oldVal) 
                    }
                }
            }
    
    // 方式四:监听data中obj对象下的某个具体属性的变化  ---- 第二种方法,使用引号包裹起来
    		watch: {
                'obj.age'(newVal, oldVal) {
                    console.log('新值:', newVal)
                    console.log('旧值:', oldVal)
                }
                // 还有另一种写法
                'obj.age': {
                    handler(newVal, oldVal) {
                        console.log('新值:', newVal)
                        console.log('旧值:', oldVal)
                    }
                }
            }
    // 方式五:监听data中obj对象中的test对象 ---  暂时没什么好办法
    
    // 方式六: 监听data中obj对象中的test对象中的具体属性值 ---- 还是两种方法
    // 		方法一:使用计算属性computed做中间层	
    		computed: {
                getValue() {
                    return this.obj.test.year
                }
            }
            watch: {
                getValue(newValue, oldValue) {
                    console.log('新值:', newVal)
                    console.log('旧值:', oldVal)
                }
                
                // 另一种写法
                getValue: {
                    handler (newVal, oldVal){
                        console.log('新值:', newVal)
                        console.log('旧值:', oldVal)
                    }
                }
            }
            
            // 	方法二:直接使用watch监听,用括号括起来
            watch: {
                'obj.test.year'(newVal, oldVal) {
                    console.log('新值:', newVal)
                    console.log('旧值:', oldVal)
                }
                
                // 另一种写法
                'obj.test.year': {
                    handler(newVal, oldVal) {
                        console.log('新值:', newVal)
                        console.log('旧值:', oldVal)
                    }
                }
            }
    </script>
    

    总结:
    1、vue2中监听data中的字段属性,直接采用 watch: { 字段名(newVal, oldVal) {语句}}就可以监听到该字段的变化
    2、对于监听data中的对象及其属性的变化:
          (1)监听整个对象: 采用watch: {obj: {handler(newVal,oldVal){语句}, deep: true}}方式,注意,该方法只能监听到整个对象的变化,不能监听到对象下的某个属性值的具体变化。即当该对象下的某个属性值发生变化时,使用这种方法监听,会执行handler函数,但获取到的数据 新值和旧值是一样的(都是新值),不能监听到其中的变化
          (2)监听对象下的某一个属性,有两种方法:
                       1、使用计算属性computed做中间层,在使用watch监听
                       2、对象的具体属性可以直接用引号把属性括起来,然后使用 watch
    3.监听data中的对象中的对象以及对象中的对象下的某个属性
          (1)对于对象中的对象目前来说,我是没有什么好的办法的 — 不过使用$set应该可以解决
          (2)监听对象中的对象下的某个属性,也有两种方法
                       1、使用计算属性computed做中间层,再使用watch监听 eg: computed: { getValue() { return this.obj.test.year}} watch: {getValue(newVal, oldVal) {语句}}
                       2、对象中的对象的某个具体属性值直接使用引号括起来,然后使用watch eg: watch: {‘obj.test.year’(newVal,oldVal){语句}}

    Vue3中的watch用法

    <script>
    	setup() {
    		let sum = ref(122)
            let tipsmessage = ref('hello')
            const obj = reactive({
                name: '隔壁老王',
                age: '30',
                test: {
                    salary: 3000,
                    year: 1
                }
            })
    
    // 方式一:监听单个基本数据类型(ref)
            watch( sum, ( newVal, oldVal ) => {
                console.log(newVal, oldVal)
            })
    
    // 方式二:监听多个基本数据类型(ref)
            watch( [ sum, tipsmessage ], ( newVal, oldVal ) => {
                // [ 122, 'hello1'] 监听出来结果发现新的值和旧的值都是数组
                console.log( newVal, oldVal )
            })
    
    // 方式三:监听对象(reactive)
            /*
            	vue3当前存在的问题:
            		 1.reactive和ref响应式使用proxy代理无法正确监听并获取对象旧的值
         			2.强制开启深度监听,关闭无效(deep配置无效)
            */
            watch(obj, (newVal, oldVal) => {
                console.log('新值:', newVal)
                console.log('旧值:', oldVal)
            })
            // 这种方法不能监听到具体某个属性值的变化,只能监听到整体obj的变化,deep配置无效
    
    
    // 方式四:监听对象下的某一个属性值  --- 这种可以监听到具体的属性值的变化
            watch(()=>obj.age, ( newVal, oldVal) => {
                console.log('新值:', newVal)
                console.log('旧值:', oldVal)
            })
    
    // 方式五:监听对象下的多个属性值变化
            watch([() => obj.name, () => obj.age], (newVal, oldVal) => {
                console.log('新值:', newVal)
                console.log('旧值:', oldVal)
                // 这个打印出来的也是数组形式
            })
    // 方式六:监听对象下的整个对象的变化 --- 要加上deep,这种写法只能监听到整个对象的变化,不能获取到对象里的对象下的某个具体的属性值的变化,即打印出来的新值和旧值都一样
    
    		watch(() => obj.test, (newVal, oldVal) => {
          		console.log('新值2', newVal)
          		console.log('旧值', oldVal)
        		}, { deep: true })
    		// 另一种写法
    		watch(obj.test, (newVal, oldVal) => {
          		console.log('新值1', newVal)
          		console.log('旧值', oldVal)
        		}, { deep: true })
    
    // 方式七: 监听对象下的对象内的具体属性值的变化 
            watch(() => obj.test.year, (newVal, oldVal) => {
                console.log('新值:', newVal)
                console.log('旧值:', oldVal)
            })
    
    // 方式八:监听对象下的对象下的多个属性值变化
            watch([()=>obj.test.year, ()=> obj.test.salary], (newVal, oldVal) => {
                console.log('新值:', newVal)
                console.log('旧值:', oldVal)
            })
    
            return {
            	sum,
            	tipsmessage,
            	obj
            }
    	}
    </script>
    

    总结:
    1、对于ref类型的数据进行监听,不能使用 ()=>字段名,的方法,而是采用直接写值进行监听,案例见方式一和方式二
    2、对于reactive类型的数据进行监听,不要使用直接写属性名的方式监听:watch(属性名,(newVal, oldVal)=>{}),因为这种方式虽说可以执行函数,但却监听不到具体属性值的变化,打印出来的新值和旧值都一样。要使用watch(()=> 属性名, (newVal, oldVal)=>{})的方式,这样可以正确获取到值的变化

    展开全文
  • 主要介绍了vue watch普通监听和深度监听(数组和对象),文中单独通过代码给大家介绍了vue watch 深度监听的方法,感兴趣的朋友一起看看吧
  • 主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下
  • vue的watch监听

    千次阅读 2021-12-23 10:21:39
    目录一、watch的直接监听1、简单变量的监听2、对象中变量的监听3、监听值为处理函数二、watch的handler函数监听1、简单变量的监听(handler函数监听)2、对象中变量的监听(handler函数+deep属性监听)3、变量的初始...

    vue提供了侦听属性watch,可以很好的观察和侦听vue实例响应数据的变化。本文对其用法进行了归整

    一、watch的直接监听

    1、简单变量的监听

    <input type="text" v-model="inputValue"> 输入框的值为:{{watchInputValue}}
    
    export default {
        data(){
            return {
                inputValue: '',
                watchInputValue: ''
            }
        },
        watch: {
            inputValue(newName, oldName){
                this.watchInputValue = newName
            }
        }
    }
    

    结果显示如下:
    在这里插入图片描述

    2、对象中变量的监听

    <input type="text" v-model="inputValue">
    输入框的值为:{{watchInputValue}}
    
    export default {
        data(){
            return {
                 info: {
                    name: ''
                 },
            }
        },
        watch: {
            'info.name'(newName, oldName){
               console.log(newName);
            }
        }
    }
    

    结果显示如下:
    在这里插入图片描述
    在这里插入图片描述

    3、监听值为处理函数

    <input type="text" v-model="inputValue">
    输入框的值为:{{watchInputValue}}
    
    export default {
        data(){
            return {
                inputValue: '',
                watchInputValue: ''
            }
        },
        watch: {
            inputValue: 'watchInputNameFunc' // 也可以写成:  'inputValue': 'watchInputNameFunc' 
        },
        methods: {
            watchInputNameFunc(newName, oldName){
                console.log(newName) // this.inputValue的值
                this.watchInputValue = this.inputValue // 也可以写成:this.watchInputValue = newName
            },
        }
    }
    

    结果显示如下:
    在这里插入图片描述

    二、watch的handler函数监听

    1、简单变量的监听(handler函数监听)

    <input type="text" v-model="inputValue">
    输入框的值为:{{watchInputValue}}
    
    export default {
        data(){
            return {
                inputValue: '',
                watchInputValue: ''
            }
        },
        watch: {
            inputValue:{
                handler(newName, oldName){
                    this.watchInputValue = newName
                }
            }
        }
    }
    

    结果显示如下:
    在这里插入图片描述

    2、对象中变量的监听(handler函数+deep属性监听)

    info对象中name的值:<input type="text" v-model="info.name" style="margin: 20px">
    
    export default {
        data(){
            return {
                info: {
                   name: ''
                },
            }
        },
        watch: {
            info:{
                handler(newName, oldName){
                     console.log('info对象中name属性值为:' + this.info.name)
                },
                deep: true
            }
        }
    }
    

    结果显示如下:
    在这里插入图片描述
    在这里插入图片描述

    3、变量的初始化监听(handler函数+immediate)

    <input type="text" v-model="inputValue">
    输入框的值为:{{watchInputValue}}
    
    export default {
        data(){
            return {
                inputValue: '11111',
                watchInputValue: ''
            }
        },
        watch: {
            inputValue:{
                handler(newName, oldName){
                    this.watchInputValue = newName
                },
                immediate: true
            }
        }
    }
    

    结果显示如下:
    在这里插入图片描述

    三、补充

    1、如果不适用immediate:true,那么变量在响应式系统中的第一次初始化值是监听不到的

    <input type="text" v-model="inputValue">
    输入框的值为:{{watchInputValue}}
    
    export default {
        data(){
            return {
                inputValue: '11111',
                watchInputValue: ''
            }
        },
        watch: {
            inputValue:{
                handler(newName, oldName){
                    this.watchInputValue = newName
                }
            }
        }
    }
    

    结果显示如下:
    在这里插入图片描述
    2、当对象的属性过多时,使用deep属性直接对对象进行深度监听,会给所有的属性加上监听器。
    如果你只是想对对象中的其中一个属性进行监听,那么可以直接使用字符串形式的监听,即:

    export default {
        watch(){
            '对象.属性'(newValue, oldValue){
                 consle.log(newValue, oldValue)
            }
        }
    }
    
    展开全文
  • watch监听数据

    2022-01-07 11:51:43
    watch监听简单数据类型可以监听到数据变化 <template> <div> <button @click="btn">点击改变</button> </div> </template> <script> export default { name: "Btn...
  • watch监听路由

    2021-12-19 00:07:28
    watch 解决$router.push 不会再次渲染页面问题
  • watch监听及深度监听

    2021-06-09 14:29:00
    这是因为我的watch没有监听到组件的变化,就是初始值没有触发watch监听. <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"><
  • watch监听数据变化

    2022-01-13 15:15:40
    watch监听数据变化 1.最简单的监听 data() { return { name: "张三" } }, watch: { name: function (newValue,oldValue) {}, } 2.监听queryParams下的startTime data() { return { queryParams: { ...
  • Vue中的 watch监听属性

    2021-12-02 17:26:49
    watch 监听单个数据; 首先要确认 watch是一个对象,要当成对象来使用。 键:就是那个,你要监听的那个家伙; 值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参 第一个是当前值...
  • Vue中的watch监听

    2022-05-18 19:54:30
    Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 计算属性和监听器区别: 1、计算属性 1.1、get函数必须有return 1.2、.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 85,333
精华内容 34,133
关键字:

watch监听