vue-watch

颖颖丫

已于 2022-09-19 10:08:59 修改

阅读量203

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-21 09:35:19 首次发布

本文链接：https://blog.csdn.net/l_y_h___/article/details/125384507

版权

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

监听属性的变化

<template>
</template>

<script>
export default {
    data(){
        return{
            num1:20,
            num2:10
        }
    },
    watch(){
        num1(newValue,oldValve){
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
            this.num2=newValue*100
        }
    }
}
</script>

immediate（立即处理进入页面就触发）

immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出,如果不设置immediate，或者将immediate设为false的话，则刷新页面后不会立即监听此对象，也就是控制台不会有输出，必须要监听的对象有值改变时控制台才会有输出。

<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        },
        watch: {
            num: {
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        }
    })
</script>
</body>

deep（深度监听）

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

handler

其值是一个回调函数。即监听到变化时应该执行的函数

<body>
<div id="app">
    <input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '冰激凌'
            }
        },
        methods: {
            change() {
                this.food.name = '棒棒糖'
            }
        },
        watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }
    })
</script>
</body>

watch: {
    'dataForm.supplierName': {
      handler(val) {
        if (!val) {
          this.dataForm.supplierId = ''
          this.dataForm.supplierCode = ''
          //this.dataForm.condition = ''
        }
        this.dataForm.condition =
          'supplierName = ' +
          "'" +
          this.dataForm.supplierName +
          "'" +
          ' and ' +
          'warehouseName = ' +
          "'" +
          this.dataForm.warehouseName +
          "'" +
          ' and ' +
          'partName = ' +
          "'" +
          this.dataForm.partName +
          "'"
        console.log(this.dataForm, 'dataForm')
      }
    }
}