vue监听属性 watch的使用总结

目录

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>

小结: immediate立即监听, deep深度监听, handler固定方法触发

---

5.总结：

 最常见的业务中使用思路：

监控data中某个变量的变化==>发生变化===> 逻辑运算 ===>实现功能

标签：vue,data,watch,newVal,true,监听,属性
来源： https://blog.csdn.net/wanghaoyingand/article/details/118686339