vue中watch的实现

在Vue中，可以使用watch来监视data数据的变化。当被监视的数据发生变化时，watch中定义的相关方法会被调用。有两种方法来使用watch。

第一种方法是不需要配置项，只需一个handler。如下所示：

watch: {
  key: function(newVal, oldVal) {
    // 监听key属性的数据变化
  },
  "obj.key": function(newVal, oldVal) {
    // 监听obj.key属性的数据变化
  }
}

其中，key为所要监视的属性名，名称要与data中的属性对应。newVal为当前属性改变后的值，oldVal为当前属性改变前的值。

第二种方法是需要配置项。如下所示：

watch: {
  key: {
    deep: false,
    handler: function(newVal, oldVal) {
      // 监听key属性的数据变化
    }
  },
  "obj.key": {
    deep: false,
    handler: function(newVal, oldVal) {
      // 监听obj.key属性的数据变化
    }
  }
}

其中，deep表示是否深度监听，默认为false。handler为处理函数，当数据发生变化时会调用该函数。

另外，还可以使用immediate选项来实现立即处理，即在进入页面时就触发watch方法。如下所示：

watch: {
  num: {
    handler: function(newVal, oldVal) {
      // 监听num属性的数据变化
    },
    immediate: true
  }
}

如果想要监听对象中的所有属性，可以使用deep选项来进行深度监听。如下所示：

watch: {
  obj: {
    deep: true,
    handler: function() {
      // 监听obj对象中所有属性的数据变化
    }
  }
}

可以通过设置deep为true来实现对对象中所有属性的监听。

总之，Vue中的watch提供了多种方法来监听数据的变化，可以根据具体需求选择合适的方式来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue中的watch(监听)](https://blog.csdn.net/qq_44998582/article/details/122333475)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue中watch的详解](https://blog.csdn.net/fu983531588/article/details/89454446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]