fix(#8728): only execute the dependArray function once

[HcySunYang]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe: This PR is not a bug fix, but a performance improvement for issue An anti-pattern in computed property may cause performance issue #8728.

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:
The newDepIds property of each Watcher instance object holds all the dependencies collected by this evaluation. We can prevent the dependArray function from being called multiple times by checking if the dependency has been collected.

[Yuyz0112]

em.. I think the changes in this PR cause a regression bug.

It looks like the dependArray method was designed to solve the dependency problem in a nested array.

<template>
  <div>
    <p>{{ nest[0] }}</p>
    <button @click="nest[0].push('next')">add one</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nest: [
        ['init'],
      ],
    };
  },
}
</script>

Have not try this example with your branch yet, but I think the checkRelated will cause the nest array not reactive.

[HcySunYang]

The dependArray function will still execute, except that it will only execute once.
Watcher collects dependencies by executing getters, and each time the getter is executed, the watcher.cleanupDeps function is executed to reset newDepIds. That is, everything is a new start every time the watcher's getter is re-executed, but in the process, there is no need to execute the dependArray function multiple times. It does not cause nested arrays to be not reactive.

[Yuyz0112]

my bad, the check was executed before depend so it is ok:)

[wangyi7099]

How about

const needDepend = !Dep.target.checkRelated(dep)
   if (Dep.target && needDepend ) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
        
            dependArray(value)
        }

Because plain-object will still cause useless redepend.

[HcySunYang]

@wangyi7099
When value is a plain-object, your code will cause it to fail to collect dependencies. And performance issues only occur in the case of large arrays, usually we don't need to care about objects

[wangyi7099]

@HcySunYang
I'm sorry. My sample code has some errors. I have updated it.

And performance issues only occur in the case of large arrays, usually we don't need to care about objects

I think you are right. But I also think care about plain-object will also save some performance cost.