Vue 监听(watch handler)

普通监听

缺点:不能深度监听(对象属性的改变),刷新或首次加载不能执行。

watch: {
            carts: function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
            }
        }

高级监听

  • handle:watch中需要具体执行的方法。

  • immediate:true立即执行handle方法(首次加载、刷新、数据改变)都会执行,缺点监听不到对象属性中发生的改变。

  • watch: {
                carts: {
                    handler(val, oldVal) {
                        console.log('new: %s, old: %s', val, oldVal)
                    },
                    immediate: true
                }
            },
     

  • deep:true深度检测。例如数组对象中的某个属性改变执行handle方法。
watch: {
    "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}
watch: {
            carts: {
                handler(val, oldVal) {
                    console.log('new: %s, old: %s', val, oldVal)
                },
                deep: true
            }
        },
 
 
ps:watch中的handler也可以如果不需要拿值的话也可以这样:
       watch: {
            carts: {
                handler:'getRow'//methods中定义的方法
                deep: true
            }
        },
       methods:{
         getRow(){
          .........
          }
       }




猜你喜欢

转载自blog.csdn.net/lwzhang1101/article/details/129426389
今日推荐