vue的watch什么时候调用

Vue中的watch是一个用于监听数据变化的功能，当指定的数据发生改变时，watch中的回调函数将会被调用。它通常用于在数据变化后执行某些逻辑操作，比如异步请求、更新UI等。

watch可以在Vue组件的选项中进行定义，它的基本语法如下：

watch: {
监听的数据: {
handler(newVal, oldVal) {
// 监听到数据变化后执行的代码
},
deep: true, // 是否监听嵌套对象的变化，默认为false
immediate: true // 是否在组件初始化时就立即执行回调函数，默认为false
}
}

watch中的回调函数接受两个参数，分别是变化后的值（newVal）和变化前的值（oldVal）。通过这两个参数，我们可以对数据的变化进行相应的处理。

watch有两个可选的选项，分别是deep和immediate。当deep为true时，表示也会监听嵌套对象内部的变化；当immediate为true时，表示在组件初始化时就立即执行回调函数。

watch的调用时机有以下几种情况：

1. 初始化时立即调用：当immediate为true时，watch在组件被创建时就会立即执行一次回调函数。

2. 数据变化时调用：当指定的数据发生改变时，watch中的回调函数将会被调用。这可以是组件内的数据，也可以是vuex中的数据等。

3. 嵌套对象内部变化时调用：当deep为true时，watch也会监听嵌套对象内部的变化，只要对象内部的属性发生改变，watch中的回调函数都会被调用。

需要注意的是，watch只能监听到被watch的数据变化，不包括它的嵌套属性或者数组的操作（比如push、pop等），这时需要使用Vue提供的数组监听方法，比如Vue.set()和splice()。

总结起来，Vue的watch是一个非常有用的功能，通过它我们可以在数据发生变化时执行相应的操作，实现数据的响应式。在实际开发中，根据具体的需求合理使用watch可以提高开发效率，同时使代码更加清晰和可维护。

在Vue中，watch是一个用于监听特定数据变化的属性。当被监听的数据发生变化时，watch会被调用。

下面是Vue中watch的调用时机：

1. 初始化时调用：当Vue实例被创建时，watch会被立即调用一次，以初始化监听的数据。

2. 属性变化时调用：当被监听的属性发生变化时，watch会被调用。这包括通过Vue实例修改属性的值，或者通过直接修改属性的值。

3. 深度监听对象属性时调用：如果在watch中设置了deep: true选项，当被监听对象的属性发生变化时，watch也会被调用。这种情况下，不仅会监听到对象的属性变化，还会监听到对象的属性内部变化。

4. 数组变化时调用：如果在watch中监听了一个数组，当数组发生变化时，watch会被调用。这包括数组的修改、添加或删除元素。

5. 初始化时监听数组的变化：如果在watch中监听了一个数组，当Vue实例创建时，会立即调用一次watch，以初始化监听数组的情况。

需要注意的是，watch默认是深度监听的，即会监听到对象或数组内部变化的情况。如果不需要深度监听，可以在watch中设置immediate: false选项。

总之，Vue中的watch是一个非常有用的功能，可以帮助我们监听数据的变化，并在变化发生时进行相应的操作。

Vue的watch属性是Vue实例中的一个属性，用于监听数据的变化并执行相应的操作。当被监听的数据发生变化时，watch会自动调用相应的回调函数。

watch属性的写法有两种：一种是简单的写法，只包含一个回调函数；另一种是复杂的写法，包含多个属性和回调函数。

下面分别介绍这两种写法的调用时机。

1. 简单的写法

简单的写法是指只监听一个数据，回调函数直接作为监听的属性。调用时机如下：

• 在Vue实例创建时，如果需要监听的数据已经存在并发生了变化，watch会立即调用回调函数。

• 在监听的数据发生变化时，watch会立即调用回调函数。

• 在Vue实例销毁之前，watch会被自动取消。

下面是一个简单写法的示例代码：

watch: {
  username: function(newValue, oldValue) {
    console.log('username变化了，新值为' + newValue + '，旧值为' + oldValue);
  }
}

2. 复杂的写法

复杂的写法是指监听多个数据，并且可以设置选项来控制调用时机。调用时机如下：

• immediate：在Vue实例创建时，如果需要监听的数据已经存在并发生了变化，watch会立即调用回调函数。

• deep：当监听的数据是一个对象或数组时，通过设置deep为true，可以深度监听数据的变化。当被监听的数据内部发生变化时，watch会立即调用回调函数。

• handler：在监听的数据发生变化时，watch会调用handler属性指定的回调函数。

• deep和handler属性发生变化时，watch会立即调用回调函数。

• selected属性发生变化时，watch会调用selected属性指定的回调函数。

下面是一个复杂写法的示例代码：

watch: {
  'user': {
    handler: function(newValue, oldValue) {
      console.log('user对象发生变化了');
    },
    deep: true
  },
  'user.selected': function(newValue, oldValue) {
    console.log('selected属性发生变化了');
  }
}

总结：无论是简单的写法还是复杂的写法，watch都是用来监听数据变化并执行相应的操作的。它的调用时机取决于被监听的数据是否发生变化。简单写法只监听一个数据，复杂写法可以监听多个数据，并且可以设置选项来控制调用时机。