时间戳

首页 > 解决方案 > 一旦单个元素发生变化，Vue 会重新渲染组件

vue.js - 一旦单个元素发生变化，Vue 会重新渲染组件

问题描述

我发现当 Vue 组件中的一个元素发生变化时，整个组件都会重新渲染。看看这个小提琴。在控制台中，您可以看到test每次count值更改时都会调用它。

这对性能有何影响？想象一下这将是一个性能更高的操作，如果该函数每秒调用一次，即使值没有改变test，这将是一个非常高的性能。test

这会导致性能问题吗？有没有办法解决这个问题？

标签： vue.js

解决方案

使用Computed Properties而不是制作一种方法来执行一次性操作。

<div id="app">
  <h1>{{test}}</h1>
  <div>
    <h2>{{count}}</h2>
  </div>
</div>

  computed: {
    test() {
        console.log('I got rerenderd!')
      return 'Hello'    
    }
  },
  methods: {
    startCount() {
        setInterval(() => {
        this.count++;
      }, 1000)
    }
  },

https://jsfiddle.net/Jokerwin/tnvcyw1d/3/

在文档中查看更多信息：https ://vuejs.org/v2/guide/computed.html

推荐阅读