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

https://github.com/vuejs/vue/issues/4060