组件何时重新渲染？

Question

我正在尝试提高我的 vuejs 应用程序的性能，但我无法弄清楚为什么某些组件正在重新渲染......

根据钩子的生命周期，组件应该重新渲染

当数据改变时

$props看看这里和那里，我认为这意味着对or的更改$data，但我一定是错的，因为通常它们都没有被修改，但仍然触发beforeUpdate和updated钩子，这意味着它确实被重新渲染。那么什么时候组件会被重新渲染呢？

编辑：我如何看到既没有$props也没有$data被修改？我为每个人设置了深度观察者，并且这些观察者不会被触发

编辑2：除了$props和之外$data，对任何插槽的更改也会导致重新渲染。这解释了一些情况，但仍然有一些组件没有任何插槽，钩子在updated没有$props或被$data更改的情况下被触发

编辑3：显然，如果一个组件有一个作为对象的道具，并且该对象的其他部分被修改，它可能会触发组件的更新......仍在尝试对此进行一些确认

Answer 1

我们首先讨论 DOM 的更新。

一般来说，Vue 实例中的每个数据属性都有自己的watcher.

您可以将其缩小到 3 层：

1. Vue实例
2. 虚拟DOM
3. DOM

Vue 实例监视虚拟 DOM。

虚拟 DOM 是真实 DOM 的表示，但解析JS（比“真实”DOM 快得多）。

然后，当我们修改某些属性时，Vue 实例会重新创建“新”虚拟 DOM（“模板”）并检查“旧”虚拟 DOM 之间的差异。如果不同，那么它只会更新“真实”DOM 中的特定部分。

beforeUpdate()和updated()挂钩。

一旦mounted()存在持续的生命周期，即每当数据发生变化并需要 DOM 更新时，两个钩子都会被触发 -beforeUpdate()和update()。

注意： 如果 DOM 尚未更改，beforeUpdate()则不会执行 和 ，即使您触发了事件。update()

看一下下面的示例，您可以看到beforeUpdate()钩子update()仅在按下按钮后第一次执行。每次都会click触发 ，但 DOM 没有改变，因此钩子不会被触发。

new Vue({
  el: '#app',
  data: {
    title: 'Vue instance'
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('update')
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h1>{{title}}</h1>
  <button @click="title='changed'">Update</button>
</div>

结论：

根据以上内容，我们可以看到，当“真实”DOM更新时，会调用钩子beforeUpdate()>这是由虚拟DOM的变化引起的>这是由Vue实例的变化引起的，反映了虚拟DOM的变化。updated()

换句话说，当模板的任何反应性依赖项发生变化时，组件将重新渲染。

这包括：props、data和computed属性。