From 4c19089d3b638965c49ad08ae41dce57a9f4fe32 Mon Sep 17 00:00:00 2001
From: Denis M <mds@gd.com>
Date: Fri, 12 Dec 2025 15:46:07 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BA=D1=82=D0=B8=D0=B2?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  |  2 +
 src/sample_examples/ReactivityFundaments.vue | 85 ++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/sample_examples/ReactivityFundaments.vue

diff --git a/src/App.vue b/src/App.vue
index ac972b7..9da6232 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/sample_examples/ReactivityFundaments.vue b/src/sample_examples/ReactivityFundaments.vue
new file mode 100644
index 0000000..c19f1e2
--- /dev/null
+++ b/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>
\ No newline at end of file