vue监听属性 watch的使用总结-蒲公英云

vue监听属性 watch的使用总结

青旅半醒 2023-10-03 10:49 82阅读 0赞

1.作用

2.应用场景

3.用法：

4.深度监听和立即执行（监听复杂类型）

5.总结：

1.作用

可以监听data/computed等属性值改变。

常见于监听某变量值的改变，或者对象中属性值的改变

2.应用场景

如监听路由变化

如当页面的数据变动需要做逻辑运算时

如组件创建时，监听某个变量或者某对象的值或属性改变时

如使用此属性判断父子组件传值发生时做逻辑。

#

3.用法：

注意：和data、methods同级

watch: {
     "被监听的属性名" (newVal, oldVal){
     }
 }

小结：想要监听一个属性变化, 可使用监听属性watch

#

4.深度监听和立即执行（监听复杂类型）

用法：

watch: {
    "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {
        }
    }
}

例子：

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>
<script>
export default {
  data(){
    return {
      user: {
        name: "小白",
        age: 18
      }
    }
  },
  watch: { // 固定属性(设置监听哪些属性)
    user: { // 具体属性名(被监听)
      handler(newVal, oldVal){ // 固定触发此函数
        console.log(newVal);
      },
      immediate: true, // 马上监听触发
      deep: true // 深度监听(监听name和age值的改变)
    }
  }
}
</script>