Proposal for a New ESLint Rule: No Literals in Vue Templates

[kaokei]

Please describe what the rule should do:

Object literals, array literals, and function literals can cause unnecessary re-renders in Vue components because these literals always generate new objects.

We hope to have a new ESLint rule that can alert us when we unconsciously use literals in Vue templates. It is very convenient and quick to casually write a literal, which can significantly degrade the performance of the component.

For example, in many sample codes of ant-design-vue, object literals are directly used. This is especially true for the table component. When rendering a large amount of data, even if data outside the table is modified, it will still cause the table to re-render.

What category should the rule belong to?

[ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[X] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<div :arr="[]"></div>
<div :arr="[1,2,3]"></div>
<div :obj="{}"></div>
<div :obj="{name:'Tom', age: 123}"></div>
<div :callback="() => someFunction(someArgs)"></div>

Additional context

vuejs/vue#4060

[rzzf]

@FloEdelmann Sorry to bother you.
I’d like to ask whether we have considered this proposal. In the project I maintain, developers often use literal objects directly, which causes the internal watch on these properties to trigger upon re-rendering, even when the object hasn’t actually changed.

Due to performance concerns, we can’t perform deep comparisons between objects. In this situation, the only thing we can do is mention in the documentation that this should be avoided. It would be even better if there were a rule enforcing this, and I’d be happy to implement it.

[FloEdelmann]

Makes sense to me. I'd suggest the name vue/no-literals-in-template (as "template literals" refers to a different thing).