watch监听不用加.value吗

在Vue.js 2.x版本中，使用watch监听对象或数组的变化时，需要在监听函数中加上新值和旧值的参数，并使用点语法来访问属性的值。例如：

watch: {
  obj: {
    handler(newVal, oldVal) {
      console.log('obj.a的新值为：', newVal.a)
      console.log('obj.a的旧值为：', oldVal.a)
    },
    deep: true
  }
}

而在Vue.js 3.x版本中，watch监听对象或数组的变化时，可以直接访问属性的值，不需要加上`.value`。例如：

watch: {
  obj: {
    handler(newVal, oldVal) {
      console.log('obj.a的新值为：', newVal.a)
      console.log('obj.a的旧值为：', oldVal.a)
    },
    deep: true
  }
}

需要注意的是，在Vue.js 3.x版本中，如果监听的是响应式对象（如ref或reactive返回的对象），则需要通过`.value`来获取其值。例如：

const obj = ref({a: 1})
watch(obj, (newVal, oldVal) => {
  console.log('obj的新值为：', newVal.value)
  console.log('obj的旧值为：', oldVal.value)
})

相关问题

vue3的watch不用.value吗

是的，在 Vue 3 中，由于 Composition API 的引入，watch 函数的使用方式与 Vue 2 有所不同。在 Vue 3 中，watch 函数会返回一个函数，该函数会被调用以停止观察。在使用 watch 函数时，不需要使用 .value 来访问 ref 和 reactive 对象的值，而是直接访问它们本身即可。例如：

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log('count changed from', oldVal, 'to', newVal)
})

count.value = 1 // 不需要使用 .value

在上面的例子中，我们使用 ref 创建了一个名为 count 的响应式变量。然后使用 watch 函数来监听 count 的变化。当 count 的值发生变化时，watch 函数会被触发并打印出变化前后的值。在更新 count 的值时，我们不需要使用 .value，直接操作 count 变量即可。

// watch watch([elementX, elementY, isOutside], () => { // console.log('xy变化了') // 如果鼠标没有移入到盒子里面 直接不执行后面的逻辑 if (isOutside.value) return // console.log('后续逻辑执行了') // 有效范围内控制滑块距离 // 横向 if (elementX.value > 100 && elementX.value < 300) { left.value = elementX.value - 100 } // 纵向 if (elementY.value > 100 && elementY.value < 300) { top.value = elementY.value - 100 } // 处理边界 if (elementX.value > 300) { left.value = 200 } if (elementX.value < 100) { left.value = 0 } if (elementY.value > 300) { top.value = 200 } if (elementY.value < 100) { top.value = 0 } // 控制大图的显示 positionX.value = -left.value * 2 positionY.value = -top.value * 2 })

这段代码是一个监听函数，当`elementX`、`elementY`或`isOutside`的值发生变化时，会执行其中的逻辑。

首先，通过判断`isOutside`的值是否为true，如果是true，则鼠标没有移入到盒子里面，直接返回，不执行后面的逻辑。

然后，通过判断`elementX`和`elementY`的值是否在有效范围内（100到300之间），如果是，则更新`left`和`top`的值。

接下来，处理边界情况。如果`elementX`的值大于300，则将`left`的值设置为200；如果`elementX`的值小于100，则将`left`的值设置为0。类似地，如果`elementY`的值大于300，则将`top`的值设置为200；如果`elementY`的值小于100，则将`top`的值设置为0。

最后，根据`left`和`top`的值，计算出`positionX`和`positionY`的值，用于控制大图的显示位置。

这段代码使用了Vue.js中的响应式数据，当相关数据发生变化时，会自动触发该监听函数。