Rendering Vue-js

[HieuDC (D.T.Hieu)]

Mn cho em hỏi sao khi em tương tác với 1 reactive value (arr), em không hiểu sao vue lại render lại cả button, và render lại hết các list element (em tưởng có key thì vue sẽ chỉ render cái element mới thêm).

<script setup>
import { ref, onMounted } from 'vue';
let current_text_list = ''
const arr = ref([
    {id: 1, name: 'C'},
    {id: 2, name: 'C++'},
    {id: 3, name: 'Java'},
    {id: 4, name: 'C#'},
    {id: 5, name: 'PHP'},
])

function btn2Click(){
    if(current_text_list === '') {
        alert('Must be enter value in to text!')
        return
    }
    arr.value.push({
        id: Date.now(),
        name: current_text_list
    })
    current_text_list = ''
}
</script>

<template>
    <div style="margin-bottom: 100px;">
        <input type="text" v-model="current_text_list" />
        <button @click="btn2Click">Add to list {{ console.log('render button') }}</button>
        <ul>
            <li v-for="item in arr" :key="item.id">{{ item.name }} {{ console.log(item) }}</li>
        </ul>
    </div>
</template>

Start:

End:

---

Thắc mắc 2: Và trong trường hợp trên, nếu em set let current_text_list = ref(’’), thì em chỉ cần nhập text (chưa click button) là cũng thực hiện render r (e không hiểu sao lại phải render lại như list và button).

---

Thắc mắc 3: nếu em để như vd 1, nhưng sửa lại hàm btn2Click

function btn2Click(){
    if(current_text_list === '') {
        alert('Must be enter value in to text!')
        return
    }

    // arr.value.push({
    //     id: Date.now(),
    //     name: current_text_list.value
    // })

    current_text_list = ''
}

Thì khi click, text sẽ không thay đổi (không đạt được twoway binding).

Em rất mong được mọi người giải đáp ạ!