vue2中this.$watch和watch的区别

在Vue2中，this.$watch和watch都是用来监听数据变化的方法，但是它们的使用方式略有不同。

this.$watch是Vue实例的一个方法，可以在Vue实例中直接调用。它的使用方式如下：

this.$watch('dataName', function(newVal, oldVal) {
  // do something
})

其中，第一个参数是要监听的数据名称，第二个参数是回调函数，当数据发生变化时会执行该回调函数。

而watch则是在Vue实例的选项中进行配置的。它的使用方式如下：

new Vue({
  data: {
    dataName: ''
  },
  watch: {
    dataName: function(newVal, oldVal) {
      // do something
    }
  }
})

其中，watch选项是一个对象，对象的属性名是要监听的数据名称，属性值是回调函数。

总的来说，this.$watch更加灵活，可以在Vue实例中任意地方调用，而watch则需要在Vue实例的选项中进行配置。

相关问题

this.$refs.video.$watch(() => { this.videoIndex2 = this.$refs.video.videoIndex return this.$refs.video.videoIndex })

这段代码与上面的代码相似，也是在Vue.js中使用$refs属性来获取视频元素，并使用$watch方法监听视频元素的videoIndex属性的变化。不同之处在于，回调函数将获取到的videoIndex值赋值给了组件中的videoIndex2属性。这段代码可能是用于实现多个视频播放器的功能，在当前播放的视频发生变化时更新相关信息并存储到videoIndex2属性中。

this.$refs.video.$watch(() => { this.videoIndex = this.$refs.video.videoIndex return this.$refs.video.videoIndex })

这段代码是在Vue.js中使用$refs属性来获取视频元素，并使用$watch方法监听视频元素的videoIndex属性的变化。一旦videoIndex属性发生变化，就会触发回调函数，将其赋值给组件中的videoIndex属性，并返回新的videoIndex值。这段代码的作用可能是用于实现视频播放器的功能，例如在当前播放的视频发生变化时更新相关信息等。