feat:更新

src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>

src/views/reactivity/ReactiveBase.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <p>name: {{ person.name }}</p>
+        <p>age:  {{ person.age }}</p>
+        <button @click="clickHander">点击</button>
+        <!-- <br />
+        <p>{{ age }}</p>
+        <button @click="clickHander2">点击</button> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue";
+const person = reactive({ name: "张三", age: 18 })
+const clickHander = () => {
+    person.age++
+}
+// let { age } = person;
+// const clickHander2 = () => {
+//     age++;
+//     console.log("age", age)
+// }
+
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 10px;
+}
+</style>

src/views/reactivity/RefBase.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p>count: {{ count }}</p>
+        <button @click="increment">点击</button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const count = ref(0)
+function increment() {
+    count.value++;
+    console.log(count)
+    console.log(count.value)
+}
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 10px;
+}
+</style>

src/views/reactivity/ToRawBase.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p>reactiveObjRaw: {{ reactiveObjRaw }}</p>
+        <p>reactiveObjRaw === obj: {{ flag }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, toRaw } from 'vue'
+const obj = { name: "张三", age: 18 }
+const reactiveObj = reactive(obj)
+const reactiveObjRaw = toRaw(reactiveObj)
+const flag = reactiveObjRaw === obj
+console.log(reactiveObjRaw) // {"name": "张三", "age": 18}
+console.log(flag) // true
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 10px;
+}
+</style>

src/views/reactivity/ToRefBase.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <p>state: {{ state }}</p>
+        <p>foo: {{ foo }}</p>
+        <button @click="clickHander1">更新state</button>
+        <button @click="clickHander2">更新foo</button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, toRef } from "vue";
+const state = reactive({ foo: 1, bar: 2 })// 双向 ref，会与源属性同步
+const foo = toRef(state, 'foo')// 更改该 ref 会更新源属性
+
+const clickHander1 = () => {
+    state.foo++
+    console.log(foo.value)
+}
+const clickHander2 = () => {
+    foo.value++
+    console.log(state.foo)
+}
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 10px;
+}
+</style>

src/views/reactivity/ToRefsBase.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <div>
+            <p>state: {{ state }}</p>
+            <p>foo: {{ foo }}</p>
+            <button @click="clickHander1">更新state</button>
+            <button @click="clickHander2">更新foo</button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, toRefs } from "vue";
+const state = reactive({ bar: 2, foo: 1, })
+let { foo } = toRefs(state);
+
+const clickHander1 = () => {
+    state.foo++;
+    console.log(state)
+}
+const clickHander2 = () => {
+    foo.value++;
+    console.log(state.foo)
+}
+
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 10px;
+}
+</style>

src/views/reactivity/reactive/ReactiveBase.vue

@@ -1,13 +0,0 @@
-<template>
-    <div>
-        ReactiveBase
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-
-</style>