0

我在一个复杂的项目中遇到了一个问题：不知何故，Vue 在每次更改时都会重新渲染所有子
项我们使用带有打字稿、类组件和装饰器的 vue 2.5.17。
我创建了一个新的、干净的组件，它与我们项目中的其他逻辑完全不相关：

import { Component, Prop } from 'vue-property-decorator'
import Vue, { CreateElement } from 'vue'

@Component
class InnerElement extends Vue {

  @Prop({ required: true })
  value: number

  render (h: CreateElement) {
    console.log('render InnerElement: ' + this.value)
    return <div key={this.value}>Value: {this.value}</div>
  }
}

@Component
export class Outside extends Vue {

  list: number[]
  parentCounter: number

  constructor () {
    super()
    this.list = []
    this.parentCounter = 0
  }

  addElement () {
    this.list.push(this.list.length)
  }

  render (h: CreateElement) {
    console.log('render parent')
    return <div>
      <div>Outside component counter: {this.parentCounter}</div>
      <button onClick={() => {
        console.log('Increase counter')
        this.parentCounter++
      }}>Increase counter</button>
      <div>{this.list.map(item => <InnerElement value={item} />)}</div>
      <button onClick={this.addElement}>Add element</button>
    </div>
  }
}

通常，当我单击“增加计数器”时，InnerElement不应重新渲染任何子级。当我在list数组中添加一个新项目时，应该只渲染新添加的元素。
我已经在一个新的、干净的项目中对此进行了测试，它按预期工作。在我们遇到问题的项目中，这就是行为：我添加了一个新元素，所有现有元素都被重新渲染。我增加计数器，所有元素都重新渲染：

如果我执行以下流程，这就是它的样子：添加 4 个元素，最后增加计数器： 这是正常行为，在新创建的项目中，对于完全相同的流程： 在此处输入图像描述

在此处输入图像描述

虚拟项目使用 vue 2.6.11，我没有费心添加 webpack-dev-server、vuex 和其他一些库，因为我认为这些不会影响事物的呈现方式。
我完全没有想法，我没有最小的线索去哪里看，到目前为止在互联网上找不到任何东西。
谢谢！

4

0 回答 0