vue监听属性 watch的使用总结

青旅半醒 2023-10-03 10:49 17阅读 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>

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

--------------------

#### 5.总结： ####

> 最常见的业务中使用思路：
> 
> **监控data中某个变量的变化==>发生变化===> 逻辑运算 ===>实现功能**