Small benchmark

malina-app.html

<script>
    let todos = [];
    let duration = '';
    
    function timeit(fn) {
        let start = Date.now();
        fn();
        setTimeout(() => {
            duration += ' + ' + (Date.now() - start);
        }, 10);
    };

    function test() {
        timeit(() => {
            todos.length = 0;
            for(let i=0;i<5000;i++) {
                todos.push({
                    name: '' + i,
                    done: false
                });
            }
        });
    }

    function remove(todo) {
        timeit(() => {
            todos.splice(todos.indexOf(todo), 1);
        });
    }

    function select(todo) {
        console.log(todo);
    }
</script>

<button on:click={test()}>Test</button>
[ {duration} ]

<ul>
    {#each todos as todo }
    <li>
        <input type="checkbox" bind:checked={todo.done} />
        <span on:click={select(todo)} class:inactive={todo.done} style="cursor: pointer;">{todo.name}</span>
        <a href on:click|preventDefault={remove(todo)}>[x]</a>
    </li>
    {/each}
</ul>

svelte-app.svelte

<script>
    let todos = [];
    let duration = '';

    function timeit(fn) {
        let start = Date.now();
        fn();
        setTimeout(() => {
            duration += ' + ' + (Date.now() - start);
        }, 10);
    };

    function test() {
        timeit(() => {
            todos.length = 0;
            for(let i=0;i<5000;i++) {
                todos.push({
                    name: '' + i,
                    done: false
                });
            }
            todos=todos;
        });
    }

    function remove(todo) {
        timeit(() => {
            todos.splice(todos.indexOf(todo), 1);
            todos=todos;
        });
    }

    function select(todo) {
        console.log(todo);
    }
</script>

<style>
    .inactive {text-decoration: line-through;}
</style>

<button on:click={() => test()}>Test</button>
[ {duration} ]

<ul>
    {#each todos as todo (todo) }
    <li>
        <input type="checkbox" bind:checked={todo.done} />
        <span on:click={() => select(todo)} class:inactive={todo.done} style="cursor: pointer;">{todo.name}</span>
        <a href on:click|preventDefault={() => remove(todo)}>[x]</a>
    </li>
    {/each}
</ul>

vue-app.vue

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      let todos = ref([]);
      let duration = ref('');

      function timeit(fn) {
        let start = Date.now();
        fn();
        setTimeout(() => {
            duration.value += ' + ' + (Date.now() - start);
        }, 10);
      };

      function test() {
        timeit(() => {
            todos.value.length = 0;
            for(let i=0;i<5000;i++) {
                todos.value.push({
                    name: '' + i,
                    done: false
                });
            }
        });
      }

      function remove(todo) {
        timeit(() => {
            todos.value.splice(todos.value.indexOf(todo), 1);
        });
      }

      function select(todo) {
        console.log(todo);
      }
  
      return {
        todos,
        duration,
        test,
        remove,
        select
      }
    }
  }
</script>

<template>
  <button @click="test">Test</button> [ {{duration}} ]

  <ul>
      <li v-for="todo in todos" :key="todo">
          <input type="checkbox" v-model="todo.done" />
          <span @click="select(todo)" class="{inactive: todo.done}" style="cursor: pointer;">{{todo.name}}</span>
          <a href @click.prevent="remove(todo)">[x]</a>
      </li>
  </ul>

</template>