Subscribe on changes!

【BUG】watch() 传入reactive类型的响应式数据,vue3.4版本与3.3/3.2表现不一致

avatar
Feb 29th 2024

Vue version

3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9UkuO1DAQvUrJm05rojQjWEXpFr9ZwAIQIFbeeJLKp8exI3+6W4pyACRWHIRjIXELyjY900ij2blevXr1qlwzezVNxcEjK1llazNMDiw6P+24GsZJGwczHIWr+xwMitoNBwyvFhZojR5hRbUrrriqtbIOau2Vg21gZM/WZ7QRTkQwCWQzVwCj7cpVj1LqVR5ifbsvYwKgwVGXcB2ChauFdLiKJrKglGcKj9+EXG93kR96aImF1N05k2CyUhyE9Hh1RSp5JDeIU9kKaTEJt16RJ62g7oXq8C11ztaJSa0KMlUEN1GBq2qTdkTbocDhOEnhkCKAqr/ezfP/VbAs1Ybwi3xa0CV+652j/i9rOdR3W84ejHC2+/3j+5+fv6pNIlFBtbnoynLmLI3fDl2xt1rRJ0brJKLHaZBoPk5hOMtZCf92y5mglR/fR8wZj3H5sabH+u4RfG9PAePsk0GL5oCc3eecMB26lL758gFP9L5PjrrxkthPJD8jfZ0PHhPttVcN2b7gRbfv4ikOqvtqb04OlT0PFYzGM4l8zuga3zwx+oPd58WL83mx5S+uaAaN

Steps to reproduce

watch监听reactive数据设置deep:fasle时,点击按钮改变reactive对象深层属性的值(data.obj.demo)时,不会触发watch监听回调。

What is expected?

vue3.3或3.2版本的watch()监听reactive数据时,deep会默认强制为true,所以修改数据深层的属性时会正确触发监听的回调函数。

3.3版本的watch()测试链接: https://play.vuejs.org/#eNp9UkuO00AQvUqpN3E0lsMoiIXlRPxmAQtAgFi1hHrs8ifT7rb640SyfAAkVhyEYyFxC6rbZCZIaHZdVa9evXpdE3sxDNnokeWssKXpBgcWnR/2XHX9oI2DCY7ClW0KBkXpuhHDq4YZaqN7WFHviiuuSq2sg1J75WAXEMmT9TlbCSdiciFIJq4Aetvkqxal1Ks0xPr2kMcCQIW9zuE6BDNXM/FwFUUkgSlNFB6/CLne7SM+zNASM6mbc2VJk5RsFNLj1RWxpBFcIQ55LaTFhbj2ijRpBWUrVIOvaXKyXpA0KiNRWVATGbgqNotH5A4FDvtBCocUARTt9X6a/u2CeS42lL+oLwZd5m+9czT/eSm78m7H2YMQzva/vn/7/eNnsVlA1FBsLqaylDlL69ddkx2sVvSJUTqR6H7oJJr3Q1jOcpbDX285E2T58W3MOeMxmh97Wizv/pM/2FPIcfbBoEUzImf3NSdMg24p33x6hyd63xd7XXlJ6EeKH5G+zgeNC+ylVxXJvsBFtW/iKXaq+WxvTg6VPS8VhMYziXjO6BpfPbL6g9xt9vR8XuTi1xFN4CQDt9k2e8bmP2IwC9g=

What is actually happening?

3.2、3.3版本的watch() 传入reactive类型监听源,即使deep设置为false,修改深层属性会触发监听回调。 但在3.2升到3.4版本时,代码不变,deep依旧是false,此时修改reactive里深层的属性,不会触发监听!

System Info

No response

Any additional comments?

No response

avatar
Feb 29th 2024

3.4 behavior is correct, 3.3 behaviour was a bug.

https://github.com/vuejs/core/pull/9928