文档不鼓励更改数据的 Vue 方法 - 但为什么呢？

Question

根据 Vue 3.0 guide:

Methods called from a template should not have any side effects, such as changing data or triggering asynchronous processes. If you find yourself tempted to do that you should probably use a lifecycle hook instead.

我很好奇这是为什么？我觉得您很可能希望更改引用您自己的方法而不是生命周期挂钩的事件侦听器上的数据。

Answer 1

我认为他们的意思是你不应该在渲染期间调用有副作用的方法，像这样：

<div :title="changeSomeData()">Hello</div>

一个这样的问题是在渲染期间调用 changeSomeData() 可以改变反应性数据，这将触发组件的另一次重新渲染，可能无限次。这不是好的代码。

程序员并不总是清楚何时重新渲染组件以及何时调用 changeSomeData()。这使得难以追踪某些数据突变的原因。

事件处理程序方法不会在呈现期间执行，而是仅注册为事件处理程序，稍后将调用以响应该特定事件。这个可以。

Answer 2

它们表示用于渲染目的的方法，例如：

<p>
   {{showSomeCalcul()}}
</p>

因为这些方法用作事件的处理程序：

 <button @clikc="send" >Send</button>

文档不鼓励更改数据的 Vue 方法 - 但为什么呢？

Vue methods to change data discouraged by docs - but why?

javascript

vue.js

vuejs3