在Vue中何时使用方法、计算属性或观察者

这意味着它能够对诸如用户输入和数据更改之类的事情做出反应。我建议阅读Reactive系统,以便更好地理解在数据更改时的Vue中的引擎机制。在Vue中有三种方法可以让你的组件使用Vue的响应性。这些是methodscomputedwatch。如果没有仔细去了解,可能看起来是可以互换的(其实在某些方面的是这样的),但是每个方法都有其最佳的使用场景。为了说明这些,我将制作一个小的应用程序,允许老师在他们的课堂上输入学生的考试分数,查看他们的平均成绩,并建立一个自动保存功能。

Methods

当你想更改组件的状态或事件发生时,使用方法不一定与发生突变的实例数据有关。方法可以接受参数,但不会跟踪任何依赖项。当你使用一个方法时,它通常会在组件中产生一些副作用,并且每次重新加载组件时都会运行方法。这也意味着,如果UI非常频繁地更新,这个方法(以及组件上的任何其他方法)也会运行。这可能会导致性能问题或UI的延迟。

下面我们开始来做这个年级考试分数统计应用程序(Grading App),我知道没有任何验证,也没有任何东西。我们的数据对象(学生姓名、分数、总分和平均分)和有一小部分考试成绩分数。我们可以使用一种方法将另一个测试对象添加到我们的数据属性的tests中,并且计算出成绩的部分和平均分。

在模板中,我们有两个输入框,一个是学生的姓名,另一个是学生的成绩,使用v-model分别绑定了data中的newTest.studentNamenewTest.score;接着有一个添加按钮button ,这个按钮使用@click绑定了addTestScore方法。这个方法主要功能就是给data中的tests

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/when-to-use-methods-computed-properties-or-watchers.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部