Question

我正试图改善vuejs应用的性能，但我无法弄清为什么某些组件会重新呈现...

根据hook's lifecycle，组件应重新渲染

数据更改时

在这里和那里看，我认为这意味着要更改$props或$data，但我一定是错的，因为通常两者都没有被修改，但是beforeUpdate和{{ 1}}钩子被触发，这意味着它确实已重新呈现。那么什么时候重新渲染组件？

编辑：如何查看updated和$props都没有被修改？我对每个监视程序都设置了一个深度监视程序，并且不会触发这些监视程序

编辑2：除了$data和$props之外，对任何插槽的更改也会导致重新渲染。这说明了某些情况，但仍然有一些组件，它们没有任何插槽，无需更改$data或updated就会触发$props钩子

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

Answer 1

让我们首先谈谈DOM更新。

通常，Vue实例中的每个数据属性都有其自己的watcher。

您可以将其缩小到3层：

Vue实例
虚拟DOM
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的更改而导致更新“真实” DOM > 时，调用了beforeUpdate()和updated()钩子> ，这是由于Vue实例中的更改所致，反映了对虚拟DOM的更改。

换句话说，当模板的任何反应性依赖关系更改时，组件将重新渲染。

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

何时重新渲染组件？

1 个答案: