computed 监听不到数组使用push,但是computed对应值会发生变化

[qp666]

Vue version

3.5.14

Link to minimal reproduction

https://play.vuejs.org/#eNp9U0uO00AQvUqpN3YkyybMsAlOxEezAImPgB2NkLErjmfabau7nYlkeY3EBnEBhDgBl8o9qG7HHwKMLPlT7736vGq37HFdh/sG2YrFOlVFbUCjaeoNl0VZV8pACwq3AaRVWTcGswBuE5PuoIOtqkrwSOs95JLLtJLaQKlzWFuF/95begF4970PiwEUBd1O6BRNsoyC/gLWG2i5BJsj3CeiwbBu9M6nPMTtphoZiv8IKDyJtShS9O8Fyz/VOZoXrslhIn+WyVIqgaGoct8bCLY8uOb/bgtoGtMoOdWlYhS3lzPKt5y+wkgJppirelbX6frknaOeSBlivQKjTgkstnDWcxlH/fJobfRhsKxFYpC+AOLdctO2w9hdN84dR4TMGHZ1BLvq55jbHIH2OWGfGmMqCY9ScvpmzRltkrMNHH9+P375EUc9fKKq6PzlTExbdeLPX4+/vs3EcTQbhwXMaDJrW+Thta4kHVtnDmd2qkKgelWbgszkbDXYRn0JUd0+d7HRPafZYXrzj/i1PtgYZ68ValR75GzETKLIyh6+evsSD/Q+gmWVNYLYd4BvkBbd2B572pNGZtT2jOe6feZ+vkLm7/TVwaDUw1C20elkcEb/39M7Rp/avQgvnY7OJ7n4cY/K5iQDL8IH4fKSdb8BBtpWsg==

### Steps to reproduce

<script setup>
import { ref, computed, watch } from 'vue';

const msg = ref(['1', '2'])
const list = ref([])
const add = () => {
  msg.value.push('1')
}

const del = () => {
  msg.value = msg.value.slice(0,1)
}

const getMsg = computed(() => {
  console.log('computed')
  list.value.push('1')
  return msg.value
})


watch(
  () => msg.value,
  () => {
    console.log('watch')
  },
  {
    deep: true,
  },
);


</script>

<template>
  <h1>{{ getMsg }} computed</h1>
  <h1>{{ msg }} watch</h1>
  <h1>{{ list }} list</h1>
  <button @click="add"> 增加</button>
  <br/>
  <br/>
  <button @click="del"> 减少</button>
</template>

What is expected?

add方法触发时, console.log('computed')应该也触发

What is actually happening?

add方法触发时, console.log('computed')未触发

System Info

Any additional comments?

No response

[jh-leong]

This is expected behavior in Vue's reactivity system:

1. Why console.log('computed') doesn't trigger when clicking add button
   The computed depends on msg.value (the array reference), which doesn't change when using push(). The reference remains the same. When you click del, it creates a new array (new reference), which properly triggers the computed.

2. Why the view updates when clicking add button
   While the computed isn't re-evaluated, the template re-renders because msg was mutated. During re-render, it accesses getMsg which returns the (mutated) array reference, showing the updated values.