监听数组或对象，修改其属性数据，但watch并没有监听到变化，寻找原因和解决方式。
对于单个ref对象的监听，我们只需要直接监听即可，没有套路。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let nameRef = ref('大澈')// 点击事件-修改数据的值const handleChange = () => { nameRef.value = '程序员大澈'}// 监听数据变化watch(nameRef, (newValue, oldValue) => { console.log(`新的值是：${newValue}，旧的值是：${oldValue}`);})</script>
对于单个ref对象的基本类型值的监听，我们需要借助getter函数监听。直接监听会报警告，并且监听不到变化。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let nameRef = ref('大澈')// 点击事件-修改数据的值const handleChange = () => { nameRef.value = '程序员大澈'}// 监听数据变化watch(() => nameRef.value, (newValue, oldValue) => { console.log(`新的值是：${newValue}，旧的值是：${oldValue}`);})</script>
内部自动将值转为reactive对象，监听reactive对象的详细见下文。
对于多个ref对象或其值的监听，我们需要使用数组将watch监听器的目标包裹。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let nameRef111 = ref('大澈111')let nameRef222 = ref('大澈222')// 点击事件-修改数据的值const handleChange = () => { nameRef111.value = '程序员大澈111' nameRef222.value = '程序员大澈222'}// 监听数据变化watch([nameRef111, () => nameRef222.value], (newValue, oldValue) => { console.log(`新的值是：${newValue[0]}，旧的值是：${oldValue[0]}`);})</script>
对于单个reactive对象的对象类型值的监听，我们只需要直接监听即可，没有套路。
但此时我们会发现，watch的新值和旧值是相同的，为什么会这样呢？又怎么解决呢？
因为对于引用类型数据，赋值存的是地址，地址指向的是堆，所以无论值怎么改变，新旧对象都指向同一个地址。
至于解决的办法很简单， 我们不去直接监听一个引用类型，而是去监听引用类型中一个具体的值即可。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let dataReactive = reactive({ name: '大澈',})// 点击事件-修改数据的值const handleChange = () => { dataReactive.name = '程序员大澈'}// 监听数据变化watch(dataReactive, (newValue, oldValue) => { console.log(`新的值是：${newValue.name}，旧的值是：${oldValue.name}`);})</script>
对于单个reactive对象的对象类型值的基本类型属性的监听，我们需要借助getter函数监听。直接监听会报警告，并且监听不到变化。
值得注意的是，watch的新值和旧值是不同的了。
对于单个reactive对象的对象类型值的对象类型属性的监听，我们需要借助getter函数监听。直接监听会报警告，并且监听不到变化。
如果是监听整个对象类型属性，只有进行整个对象替换时，才不需要开启deep深度监听。其它时候，如修改、删除、新增，都需要开启deep深度监听，才能监听数据的变化。
如果是监听对象类型属性中的某个属性值，则不需要开启deep深度监听。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let dataReactive = reactive({ obj: { age: 18, },})// 点击事件-修改数据的值const handleChange = () => { dataReactive.obj.age = 99}// 监听数据变化watch(() => dataReactive.obj, (newValue, oldValue) => { console.log(`新的值是：${newValue.age}，旧的值是：${oldValue.age}`);}, { deep: true,})</script>
同监听单个reactive对象-对象类型值-对象类型属性。
所有情况都同监听单个reactive对象-对象类型值。
同监听多个ref对象或其值。
内容如上。
有的时候，我们可能只需要监听一次。在监听之后，我们就需要取消对watch的监听。此时我们可以这样做，将watch监听器赋值给一个变量，在取消监听的时候调用此变量即可。
<script setup>import { reactive, ref, watch, computed } from 'vue';// 定义数据let nameRef = ref('大澈')// 点击事件-修改数据的值const handleChange = () => { nameRef.value = '程序员大澈'}// 点击事件-停止对应的watch监听数据const handleStopChange = () => { stopWatch()}// 监听数据变化const stopWatch = watch(() => nameRef.value, (newValue, oldValue) => { console.log(`新的值是：${newValue}，旧的值是：${oldValue}`);})</script>本文链接：http://www.28at.com/showinfo-26-26545-0.htmlVue3问题：如何解决Watch监听对象数组失效，及如何停止监听？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号