Реактивные события

src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import TemplateSyntax from './sample_examples/TemplateSyntax.vue'
+import ReactivityFundaments from './sample_examples/ReactivityFundaments.vue'
 
 import { ref } from 'vue'
 
@@ -15,6 +16,7 @@ function increment() {
 
 <template>
   <TemplateSyntax />
+  <ReactivityFundaments />
   <hr />
   <!-- Родной пример -->
   <button @click="increment">{{ count }}</button>

src/sample_examples/ReactivityFundaments.vue

@@ -0,0 +1,85 @@
+<script setup>
+    import { computed, nextTick, reactive, ref } from 'vue'
+
+    const count = ref(0)
+    const items = ref([])
+    const objs = reactive(
+        [
+            {"name":"Ivan","age":18},
+            {"name":"Stepan","age":19},
+            {"name":"Viktor","age":20},
+        ]
+    )
+    
+    const val = ref("")
+    
+    const nameVal = ref("")
+    const ageVal = ref("")
+
+    function increment() {
+        count.value++
+    }
+
+    function diminution() {
+        count.value--
+    }
+
+   async function addstr() {
+        items.value.push(val.value)
+        val.value=""
+        // Чтобы дождаться завершения обновления ДОМ после изменения 
+        await nextTick()
+    }
+
+    function addusr() {
+        objs.push({"name":nameVal.value,"age":ageVal.value})
+        nameVal.value=""
+        ageVal.value=""
+    }
+
+    // Срабатывает только если объект objs был изменен.
+    // Если при повторном обращении objs был не изменен, возвраще кэш
+    const counts = computed(()=>{
+        return objs.length
+    })
+
+
+    const ddate = reactive(Date)
+
+
+</script>
+
+
+
+
+
+<template>
+    <h1>Основы реактивности</h1>
+
+    <div> Обработка метода:  <b @click="increment">+1 </b> ({{ count }}) <b @click="diminution">-1 </b></div>
+
+    <div>
+        <input type="text" @change="addstr" v-model="val">
+        <ul><li v-for="item in items">{{ item }}</li></ul>
+    </div>
+
+    <dir>
+        <table>
+            <tr>
+                <td><input v-model="nameVal" type="text"></td>
+                <td><input v-model="ageVal" type="text"></td>
+                <td><b @click="addusr">Add</b></td>
+            </tr>
+            <tr v-for="td in objs">
+                <td>{{ td.name }}</td>
+                <td>{{ td.age }}</td>
+            </tr>
+            <tr><td colspan="2">Всего:<b>{{ counts }}</b></td></tr>
+        </table>
+    </dir>
+
+    <div>
+        {{ ddate.now() }}
+    </div>
+
+</template>